水纹动画

最新推荐文章于 2023-05-18 18:12:17 发布

bubucuo

最新推荐文章于 2023-05-18 18:12:17 发布

阅读量393

点赞数

分类专栏：前端日记

本文链接：https://blog.csdn.net/fangfanggaogao/article/details/45484323

版权

前端日记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

//模仿一个网页，把水纹动画抽出。。。

<html>

<head>
   <meta content="charset=utf-8">
    <title>ripple</title>
    <style type="text/css">
       .ripple-box {
           width: 770px;
           height: 200px;
           position: absolute;
           z-index: 1;
           left: 50%;
           margin-left: -385px;
       }

       .ripple {
           opacity: 0;
           width: 100%;
           border: 4px solid rgba(255,105,17,.5);
           border-radius: 100%;
           height: 100%;
           left: 0;
           position: absolute;
           top: 0;
           -webkit-animation:rippleAni 5s ease 0s infinite normal;
       }

       @keyframes rippleAni {
           from {
               opacity: 1;
               transform: scale(0.1,.01);
           }

           to {
               opacity: 0;
               transform: scale(0.8,0.8);
           }
       }

       @-webkit-keyframes rippleAni {
           from {
               opacity: 1;
               -webkit-transform: scale(0.1,.01);
           }

           to {
               opacity: 0;
               -webkit-transform: scale(0.8,0.8);
           }
       }

       @-moz-keyframes rippleAni {
           from {
               opacity: 1;
               -moz-transform: scale(0.1,.01);
           }

           to {
               opacity: 0;
               -moz-transform: scale(0.8,0.8);
           }
       }

    </style>
</head>
<body>

    <div class="ripple-box">
       <div class="ripple" ></div>
       <div class="ripple" style="-webkit-animation-delay:1s;"></div>
       <div class="ripple" style="-webkit-animation-delay:2s;"></div>
       <div class="ripple" style="-webkit-animation-delay:3s;"></div>
       <div class="ripple" style="-webkit-animation-delay:4s;"></div>
   </div>

</body>

</html>

//又写了一下,加了片树叶 2015.05.05 11:27

<html>
<head>
    <title></title>
    <style type="text/css">
        #ripple_div{
            width: 300px;
            height: 130px;
            overflow: hidden;
            position: relative;
            margin: 50px auto;
        }
        #leaf{
            width: 200px;
            position: absolute;
            margin: 5px 0 0 50px;
            z-index: 1;
        }
        .ripple{
            -webkit-animation:rippleAni 5s ease 0 infinite normal;
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 100%;
            border: solid 1px gray;
            z-index: 0;
        }
        @-webkit-keyframes rippleAni{
            from{
                opacity: 1;
                -webkit-transform:scale(0.1,0.01);
            }
            to{
                opacity: 0;
                --webkit-transform: scale(0.8,0.8);
            }
        }
    </style>
</head>
<body>

    <div id="ripple_div">
        <img id="leaf" src="https://img-my.csdn.net/uploads/201505/05/1430803263_9153.png-thumb.jpg">

    </div>
</body>
<script type="text/javascript">
    var ripple_div = document.getElementById("ripple_div");
    for(var i=0;i<5;i++){
        var ripple = document.createElement("div");
        ripple.setAttribute("class","ripple");
        ripple.setAttribute("style","-webkit-animation-delay:"+i+"s;");
        ripple_div.appendChild(ripple);
    }

</script>

</html>