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;
    }
    .animation-container .boom-container {
        position:absolute;
        display:flex;
        width:80px;
        height:80px;
        text-align:center;
        align-items:center;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        left:200px;
        top:-145px;
    }
    .animation-container .boom-container .shape {
        display:inline-block;
        position:relative;
        opacity:0;
        -webkit-transform-origin:center center;
        transform-origin:center center;
    }
    .animation-container .boom-container .shape.triangle {
        width:0;
        height:0;
        border-style:solid;
        -webkit-transform-origin:50% 80%;
        transform-origin:50% 80%;
        -webkit-animation-duration:1s;
        animation-duration:1s;
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
        -webkit-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
        margin-left:-15px;
        border-width:0 2.5px 5px 2.5px;
        border-color:transparent transparent #42e599 transparent;
        -webkit-animation-name:boom-triangle;
        animation-name:boom-triangle;
    }
    .animation-container .boom-container .shape.triangle.big {
        margin-left:-25px;
        border-width:0 5px 10px 5px;
        border-color:transparent transparent #fade28 transparent;
        -webkit-animation-name:boom-triangle-big;
        animation-name:boom-triangle-big;
    }
    .animation-container .boom-container .shape.disc {
        width:8px;
        height:8px;
        border-radius:100%;
        background-color:#d15ff4;
        -webkit-animation-name:boom-disc;
        animation-name:boom-disc;
        -webkit-animation-duration:1s;
        animation-duration:1s;
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
        -webkit-animation-iteration-count:i.........完整代码请登录后点击上方下载按钮下载查看