css实现线条弹射水面涟漪动画效果代码-html代码-BFW代码库

css实现线条弹射水面涟漪动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现线条弹射水面涟漪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
    	display:flex;
    	align-items:center;
    	position:relative;
    	background:linear-gradient(to bottom right,#070630 0%,#060454 100%);
    	min-height:100vh;
    }
    .animation-container {
    	display:block;
    	position:relative;
    	width:800px;
    	max-width:100%;
    	margin:0 auto;
    }
    .animation-container .lightning-container {
    	position:absolute;
    	top:50%;
    	left:0;
    	display:flex;
    	-webkit-transform:translateY(-50%);
    	transform:translateY(-50%);
    }
    .animation-container .lightning-container .lightning {
    	position:absolute;
    	display:block;
    	height:12px;
    	width:12px;
    	border-radius:12px;
    	-webkit-transform-origin:6px 6px;
    	transform-origin:6px 6px;
    	-webkit-animation-name:woosh;
    	animation-name:woosh;
    	-webkit-animation-duration:1.5s;
    	animation-duration:1.5s;
    	-webkit-animation-iteration-count:infinite;
    	animation-iteration-count:infinite;
    	-webkit-animation-timing-function:cubic-bezier(0.445,0.05,0.55,0.95);
    	animation-timing-function:cubic-bezier(0.445,0.05,0.55,0.95);
    	-webkit-animation-direction:alternate;
    	animation-direction:alternate;
    }
    .animation-container .lightning-container .lightning.white {
    	background-color:white;
    	box-shadow:0px 50px 50px 0px rgba(255,255,255,0.3);
    }
    .animation-container .lightning-container .lightning.red {
    	background-color:#fc7171;
    	box-shadow:0px 50px 50px 0px rgba(252,113,113,0.3);
    	-webkit-animation-delay:0.2s;
    	animation-delay:0.2s;
    }
.........完整代码请登录后点击上方下载按钮下载查看