css实现水波波纹扩散动画效果代码-html代码-BFW代码库

css实现水波波纹扩散动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现水波波纹扩散动画效果代码

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

<html>
<head>
    <style>
        html, body {
            background-color: #252222;
            width: 100%;
            height: 100%;
        }

        .sound-container {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -70px;
            margin-left: -70px;
        }

        .sound {
            position: relative;
            width: 140px;
            height: 140px;
            padding: 0;
            border-radius: 200px;
            list-style: none;
            overflow: hidden;
            z-index: 2;
        }
        .sound li {
            background: #f16880;
            position: absolute;
            margin: auto;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            width: 0%;
            height: 0%;
            border-radius: 50%;
        }
        .sound li:nth-child(1) {
            opacity: 0.2;
            -webkit-animation: zoom1 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
            animation: zoom1 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
        }
        .sound li:nth-child(2) {
            opacity: 0.3;
            -webkit-animation: zoom2 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
            animation: zoom2 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }
        .sound li:nth-child(3) {
            opacity: 0.5;
            -webkit-animation: zoom3 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
            animation: zoom3 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
        }
        .sound li:nth-child(4) {
            opacity: 0.6;
            -webkit-animation: zoom4 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
            animation: zoom4 6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
            -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
        }

@-webkit-keyframes zoom1 {
            0% {
                width: 0%;
                height: 0%;
            }
            35% {
                width: 100%;
                height: 100%;
            }
            50% {
                opacity: 0;
                width: 100%;
                height: 100%;
            }
            100% {
                opacity: 0;
                width: 100%;
                height: 100%;
            }
        }

@keyframes zoom1 {
            0% {
                width: 0%;
                height: 0%;
            }
            35% {
                width: 100%;
                height: 100%;
            }
            50% {
                opacity: 0;
                width: 100%;
                height: 100%;
            }
            100% {
                opacity: 0;
                width: 100%;
                height: 100%;
            }
        }
@-webkit-keyframes zoom2 {
     .........完整代码请登录后点击上方下载按钮下载查看