zoukankan html css js c++ java

css 图片波浪效果

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

效果：

wave2.png

html:

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

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

            .top-btn {
                height: 400px;
            }

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

            .water-group .water {
                position: absolute;
                 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>

查看全文

相关阅读:
网络CCNA基础了解
 KVM 安装 VMware 虚拟机
 [转载]JS浏览器兼容性问题
 java中数组是不是对象？
[转载]request.getServletPath()方法
 weblogic下更改jsp不生效的解决办法
 java之args[0]
docker小demo
eclipse优化
 [转载]oracle建表语句大全

原文地址：https://www.cnblogs.com/linjiangxian/p/11464753.html