svg+css实现水滴冒泡液体动画效果代码-html代码-BFW代码库

svg+css实现水滴冒泡液体动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现水滴冒泡液体动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
body,html {
        align-items:center;
        background-color:#0c1016;
        display:flex;
        font-family:"Roboto";
        font-size:10px;
        height:100%;
        justify-content:center;
        margin:0;
        padding:0;
        width:100%
}
* {
        box-sizing:border-box
}
svg {
        position:absolute;
        top:-4000px;
        left:-4000px
}
#gooey-button {
        padding:1rem;
        font-size:2rem;
        border:0;
        color:#0c1016;
        filter:url("#gooey");
        position:relative;
        background-color:#00FF80
}
#gooey-button:focus {
        outline:0
}
#gooey-button .bubbles {
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0
}
#gooey-button .bubbles .bubble {
        background-color:#00FF80;
        border-radius:100%;
        position:absolute;
        top:0;
        left:0;
        display:block;
        z-index:-1
}
#gooey-button .bubbles .bubble:nth-child(1) {
        left:13px;
        width:25px;
        height:25px;
        -webkit-animation:move-1 3.02s infinite;
        animation:move-1 3.02s infinite;
        -webkit-animation-delay:.2s;
        animation-delay:.2s
}
#gooey-button .bubbles .bubble:nth-child(2) {
        left:18px;
        width:25px;
        height:25px;
        -webkit-animation:move-2 3.04s infinite;
        animation:move-2 3.04s infinite;
        -webkit-animation-delay:.4s;
        animation-delay:.4s
}
#gooey-button .bubbles .bubble:nth-child(3) {
        left:71px;
        width:25px;
        height:25px;
        -webkit-animation:move-3 3.06s infinite;
        animation:move-3 3.06s infinite;
        -webkit-animation-delay:.6s;
        animation-delay:.6s
}
#gooey-button .bubbles .bubble:nth-child(4) {
        left:35px;
        width:25px;
        height:25px;
        -webkit-animation:move-4 3.08s infinite;
        animation:move-4 3.08s infinite;
        -webkit-animation-delay:.8s;
        animation-delay:.8s
}
#gooey-button .bubbles .bubble:nth-child(5) {
        left:34px;
        width:25px;
        height:25px;
        -webkit-animation:move-5 3.1s infinite;
        animation:move-5 3.1s infinite;
        -webkit-animation-delay:1s;
        animation-delay:1s
}
#gooey-button .bubbles .bubble:nth-child(6) {
        left:36px;
        width:25px;
        height:25px;
        -webkit-animation:move-6 3.12s infinite;
        animation:move-6 3.12s infinite;
        -webkit-animation-delay:1.2s;
        animation-delay:1.2s
}
#gooey-button .bubbles .bubble:nth-child(7) {
        left:91px;
        width:25px;
        height:25px;
        -webkit-animation:move-7 3.14s infinite;
        animation:move-7 3.14s infinite;
        -webkit-animation-delay:1.4s;
        animation-delay:1.4s
}
#gooey-button .bubbles .bubble:nth-child(8) {
        left:62px;
        width:25px;
.........完整代码请登录后点击上方下载按钮下载查看