css3 水波动画

待我称王封你为后i 2022-04-08 09:19 359阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        html{
            font-size: 20px;
        }
          body{
              background:#444;
          }
        @-webkit-keyframes opac{
            from {
                opacity: 1;
                width:0;
                height:0;
                top:50%;
                left:50%;
            }
            to {
                opacity : 0;
                width:100%;
                height:100%;
                top:0;
                left:0;
            }
        }
        .animate .w2{
            /*延迟1s*/
            -webkit-animation-delay:1s;
        }
        .animate .w3{
            -webkit-animation-delay:2s;
        }
        .animate .w4{
            -webkit-animation-delay:3s;
        }
        .wave{
            width: 22.7rem;
            height: 22.7rem;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        .wave *{
            border:1px solid #fff;
            position:absolute;
            border-radius:50%;
            -webkit-animation:opac 4s infinite;
        }
        </style>
    </head>
    
    <body>
        <div class="animate wave">
            <div class="w1"></div>
            <div class="w2"></div>
            <div class="w3"></div>
            <div class="w4"></div>
        </div>
    </body>
    
    </html>

效果图：

![475401-20180906144009392-252305089.png][]

2.波浪

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        *{margin:0;padding:0;}
        body{ background-color: #522350 }
        .water {  
            position: relative;  
            width: 200px;  
            height: 200px;  
            background-color: rgb(118, 218, 255);  
            border-radius: 50%; 
            margin:200px auto 0; 
            overflow: hidden;
        }  
        .water:before,.water:after{  
               content: "";  
               position: absolute;  
               width: 400px;  
               height: 400px;  
               top: 0;  
               left: 50%;  
               background-color: rgba(255, 255, 255, .4); 
               border-radius: 45%;  
               transform: translate(-50%, -70%) rotate(0);  
               animation: rotate 6s linear infinite;  
               z-index: 10;  
        }  
               
        .water:after {  
               border-radius: 47%;  
               background-color: rgba(255, 255, 255, .9);  
               transform: translate(-50%, -70%) rotate(0);  
               animation: rotate 10s linear -5s infinite;  
               z-index: 20;  
        }  
          
        @keyframes rotate {  
            50% {  
                transform: translate(-50%, -70%) rotate(180deg);  
            } 100% {  
                transform: translate(-50%, -70%) rotate(360deg);  
            }  
        }  
     
        </style>
    </head>
    
    <body>
        <div class="water"></div>  
    </body>
    
    </html>

效果：

![475401-20180906144136755-1865380083.png][]

3.波浪

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            font-family: "微软雅黑";
            font-size: 100%;
            font-style: normal
        }
    
        dd,
        dl,
        dt,
        em,
        i,
        p,
        textarea,
        a,
        div {
            padding: 0px;
            margin: 0px;
        }
    
        a {
            text-decoration: none;
        }
    
        img {
            border: 0px;
        }
    
        ul,
        li {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
    
        .fl {
            float: left
        }
    
        .fr {
            float: right
        }
    
        body {
            margin: 0px;
            padding: 0px;
            color: #000;
            background: #fff;
        }
    
        a {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: transparent;
        }
    
        .none {
            display: none
        }
    
    
    
    
        .fensug {
            width: 168px;
            height: 168px;
            background: #fff;
            border: 9px #5576ac solid;
            margin: 100px auto;
            padding: 5px;
            -webkit-border-radius: 25em;
            -moz-border-radius: 25em;
            border-radius: 25em;
            overflow: hidden;
            position: relative
        }
    
        .fensug .wavenum {
            width: 168px;
            height: 168px;
            overflow: hidden;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
            position: absolute;
            left: 5px;
            top: 5px;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
    
        .fensug .wavenum b {
            color: #fff;
            font-size: 43px;
            text-align: center;
            display: block;
            position: relative;
            z-index: 2;
            line-height: 45px;
        }
    
        .fensug .wavenum tt {
            color: #fff;
            font-size: 20px;
            text-align: center;
            display: block;
            position: relative;
            z-index: 2;
            font-weight: bold;
            width: 140px;
            border-top: 2px #fff solid;
            margin: 3px auto;
            line-height: 35px;
        }
    
    
    
        .waven {
            width: 168px;
            height: 168px;
            webkit-border-radius: 25em;
            -moz-border-radius: 25em;
            border-radius: 25em;
            background: #5576ac;
            overflow: hidden;
            position: relative
        }
    
        .wave {
            width: 408px;
            height: 80%;
            position: absolute;
            left: 0px;
            bottom: 0;
            background: url(http://www.17sucai.com/preview/5730/2018-09-20/images/images/wave.png) no-repeat;
            animation: move_wave 1s linear infinite;
            -webkit-animation: move_wave 1s linear infinite;
        }
    
    
    
        @-webkit-keyframes move_wave {
            0% {
                -webkit-transform: translateX(0)
            }
    
            50% {
                -webkit-transform: translateX(-25%)
            }
    
            100% {
                -webkit-transform: translateX(-50%)
            }
        }
    
        @keyframes move_wave {
            0% {
                transform: translateX(0)
            }
    
            50% {
                transform: translateX(-25%)
            }
    
            100% {
                transform: translateX(-50%)
            }
        }
        </style>
    </head>
    
    <body>
        <div class="fensug">
            <div class="wavenum "><b id="denfenjs">61%</b><tt>2018 Q1</tt></div>
            <div class="waven">
                <div class="wave" style="height: 60%;"> </div>
            </div>
        </div>
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        var waveHeight = 0;
        var waveNum = 61;
    
        function waves() {
            if (waveHeight < waveNum) {
                $(".wave").css("height", waveHeight + "%");
                waveHeight++;
            }
            setTimeout(function() { waves() }, 15);
        }
    
        $(function() {
            $("#denfenjs").html(waveNum + "%");
            waves();
        })
        </script>
    </body>
    
    </html>

效果图：

![475401-20181018170503709-1993406765.png][]

[原文地址][Link 1]

[475401-20180906144009392-252305089.png]: /images/20220407/206253ef3a71435284647a17c8f2c239.png
[475401-20180906144136755-1865380083.png]: /images/20220407/53c6732ced734aa4b70e0d6957f7788d.png
[475401-20181018170503709-1993406765.png]: /images/20220407/f5425de96aea4dedb2ed549e2c93de1c.png
[Link 1]: http://www.cnblogs.com/huanghuali/p/9598258.html