参考：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>

css 图片波浪效果的更多相关文章

  1. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  2. 一种巧妙的使用 CSS 制作波浪效果的思路

    在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思 ...

  3. 使用纯css实现波浪效果

    有时候我们需要实现水晃动的效果,其实我们可以通过css旋转动画和圆角来实现. 首先来2个div,外层div相对定位,内层div绝对定位,内层div大致位于外层div上半部分.外层div设置一个颜色较深 ...

  4. html/css 图片展示效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. css图片切换效果分析+翻译整理

    Demos:http://tympanus.net/Tutorials/CSS3SlidingImagePanels/ 出处:http://tympanus.net/codrops/2012/01/1 ...

  6. pixijs shader 实现图片波浪效果

    const app = new PIXI.Application({ transparent: true }); document.body.appendChild(app.view); // Cre ...

  7. CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果

    本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果. 起因 一日,一群友私聊问我.如何使用 CSS 实现下述效果,一个文字的波浪效果: 我当时想都没想,就回 ...

  8. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  9. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

随机推荐

  1. eclipse打包插件net.sf.fjep.fatjar

    eclipse打包插件安装 1)将net.sf.fjep.fatjar_0.0.32.jar拷贝到eclipse安装目录中的plugins目录下,然后重启eclipse即可. 软件获取方式: 链接:h ...

  2. HAOI 2006 受欢迎的牛 （洛谷2341）

    题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的"喜欢"是可以传递的--如果A喜 欢B,B喜 ...

  3. NX二次开发-UFUN拉伸函数UF_MODL_create_extruded

    NX9+VS2012 //NX二次开发中常用拉伸函数为UF_MODL_create_extruded2,但是此函数不能拉伸片体, //想要拉伸片体用函数UF_MODL_create_extruded. ...

  4. C++从string中删除所有的某个特定字符【转载】

    转载自https://www.cnblogs.com/7z7chn/p/6341453.html C++中要从string中删除所有某个特定字符, 可用如下代码 str.erase(std::remo ...

  5. nginx、php-fpm安装mongodb及驱动扩展

    1.安装mongodb linux下安装mongodb很简单,执行如下命令完成安装 wget http://downloads.mongodb.org/linux/mongodb-linux-i686 ...

  6. Funcation：Object

    ylbtech-Funcation:Object 1.返回顶部 1. public object GetMyRelation() { var list = new List<object> ...

  7. [17]APUE：线程

    通常情况下,线程模型的并发性能优于进程模型,但不总是这样 线程的优势: 线程的创建.销毁及上下文切换代价比进程低 某些情况下,使用线程可以简化逻辑,避免异步编程的复杂性 同一进程内所有线程共享全局内存 ...

  8. 剑指offer——04从尾到头打印链表

    题目描述 输入一个链表,按链表从尾到头的顺序返回一个ArrayList.   有多种方法. class Solution { public: vector<int> printListFr ...

  9. 【csp】2017-9

    1.打酱油 题目: 题意:如上. 题解:经典问题.看代码吧.qwq 代码: #include<iostream> #include<cstdio> #include<al ...

  10. Jmeter----请求依赖之边界值提取器

    填写左边界和右边界 引用变量名就是要存储的变量名词