CSS3实现水波纹效果

最新推荐文章于 2024-08-01 15:42:30 发布

weixin_30367169

最新推荐文章于 2024-08-01 15:42:30 发布

阅读量520

点赞数

原文链接：http://www.cnblogs.com/chaoyueqi/p/10147563.html

版权

CSS3的动画非常强大，但是平时写的并不多，这里，记录一个CSS3实现水波纹的效果

实现代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>水波纹效果</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }           
            html,
            body {
                height: 100%;
                overflow: hidden;
            }           
            @-webkit-keyframes wateranimate {
                0% {
                    -webkit-transform: scale(0);
                    opacity: 0.5;
                }
                100% {
                    -webkit-transform: scale(2);
                    opacity: 0;
                }
            }
            @keyframes wateranimate {
                0% {
                    -webkit-transform: scale(0);
                    transform: scale(0);
                    opacity: 0.5;
                }
                100% {
                    -webkit-transform: scale(2);
                    transform: scale(2);
                    opacity: 0;
                }
            }           
            .container {
                position: relative;
                width: 500px;
                height: 500px;
                margin: 50px auto;
                border: 1px solid yellow;
            }           
            .water1 {
                -webkit-animation: wateranimate 12s 9s ease-out infinite;
                animation: wateranimate 12s 9s ease-out infinite;
            }           
            .water2 {
                -webkit-animation: wateranimate 12s 6s ease-out infinite;
                animation: wateranimate 12s 6s ease-out infinite;
            }           
            .water3 {
                -webkit-animation: wateranimate 12s 3s ease-out infinite;
                animation: wateranimate 12s 3s ease-out infinite;
            }           
            .water4 {
                -webkit-animation: wateranimate 12s 0s ease-out infinite;
                animation: wateranimate 12s 0s ease-out infinite;
            }           
            .water1, .water2, .water3, .water4 {
                padding: 20%;
                position: absolute;
                left: 30%;
                top: 30%;
                border: 1px solid pink;
                box-shadow: 0 0 120px 30px rgba(235, 31, 137, 1) inset;
                border-radius: 100%;
                z-index: 1;
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="water1"></div>
            <div class="water2"></div>
            <div class="water3"></div>
            <div class="water4"></div>
        </div>
    </body>
</html>