css 图片波浪效果

最新推荐文章于 2023-08-12 11:14:07 发布

Macdull2014

最新推荐文章于 2023-08-12 11:14:07 发布

阅读量191

点赞数

原文链接：http://www.cnblogs.com/linjiangxian/p/11464753.html

版权

参考：https://blog.csdn.net/zhichaosong/article/details/80944924#_99

效果：

wave2.png

html:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 0;
            }

            .blue-bg {
                height: 510px;
                width: 100%;
                margin: auto;
                background: linear-gradient(to bottom, #3ec4fc, #0081cc);
            }

            .top-btn {
                height: 400px;
            }

            .water-group {
                position: relative;
                height: 110px;
                width: 100%;
                overflow: hidden;
            }

            .water-group .water {
                position: absolute;
                width: 200%;
                height: 100%;
                background-size: 50% 100%;
            }

            .water-group .water1 {
                top: 20px;
                left: -100%;
                opacity: 0.2;
                animation: water-right 20s infinite linear;
            }

            .water-group .water2 {
                top: 30px;
                left: 0;
                opacity: 0.3;
                animation: water-left 30s infinite linear;
            }

            .water-group .water3 {
                top: 44px;
                left: -100%;
                animation: water-right 40s infinite linear;
            }

            @keyframes water-right {
                0% {
                    transform: translateX(0) translateZ(0) scaleY(1)
                }

                50% {
                    transform: translateX(25%) translateZ(0) scaleY(0.85)
                }

                100% {
                    transform: translateX(50%) translateZ(0) scaleY(1)
                }
            }

            @keyframes water-left {
                from {
                    transform: translate(0%, 0px);
                }

                to {
                    transform: translate(-50%, 0px);
                }
            }
        </style>
    </head>
    <body>
        <div class="blue-bg">
            <div class="top-btn">
            </div>
            <div class="water-group">
                <div class="water water1" style="background-image: url('wave2.png')"></div>
                <div class="water water2" style="background-image: url('wave2.png')"></div>
                <div class="water water3" style="background-image: url('wave2.png')"></div>
            </div>
        </div>
    </body>
</html>

转载于:https://www.cnblogs.com/linjiangxian/p/11464753.html

Macdull2014

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css 图片波浪效果

参考：https://blog.csdn.net/zhichaosong/article/details/80944924#_99效果：wave2.pnghtml:<!DOCTYPE html><html> <head> <style> ...
复制链接

扫一扫