参考：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. 57 c++ 读取二进制文件： 以.raw后缀的TDF_Voxel_Size文件为例

    0 引言 毕业设计中用到了.raw格式的文件,需要将该文件按照M*N*P的矩阵格式加载到内存中.采用 #include <fstream> 中的FILE* 加载,并针对数据占用字节数,以 ...

  2. 今天工作整整一个月了，来记录一下(web前端)

    25号,工作整整一个月了,时光飞逝, 这一个月以来,无论是工作上还是生活上,都让我成长了很多,也多了些对人生的思考… 先回顾一下找工作的那段时间吧年前找工作有多辛酸,年后找工作就有多幸运那段日子,我这 ...

  3. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  4. 如何理解Vue的render函数

    第一个参数(必须) - {String | Object | Function} <!DOCTYPE html> <html lang="en"> < ...

  5. 对A盾原理的小小总结，膜拜A神

    A盾的原理是在驱动加载时重载os内核,获取原始ssdt表的地址. 应用层点击查询的代码在文件A-ProtectView.cpp中,每种点击操作调用相应的 query查询函数,在query函数里 Rea ...

  6. webconfig节点值里的文字换行问题

    有时候会遇到在配置节点中配置文字的问题,比如: <add key="notice" value="温馨提示:1,感谢您访问; \n 2,谢谢来访"/> ...

  7. STM32F103

    memory map • Four masters: – Cortex® -M3 core DCode bus (D-bus) and System bus (S-bus)– GP-DMA1 & ...

  8. Markdown 语法大全

    1 强调 星号与下划线都可以,单是斜体,双是粗体,符号可跨行,符号可加空格 **一个人来到田纳西** __毫无疑问__ *我做的馅饼 是全天下* _最好吃的_ 效果: 一个人来到田纳西 毫无疑问 我做 ...

  9. JDBC_数据库连接池DRUID

    /** * @Description: TODO(这里用一句话描述这个类的作用) * @Author aikang * @Date 2019/8/26 20:12 */ /* 1.数据库连接池: 1. ...

  10. C++列表初始化是初始化本类自身含有的成员变量，不能直接初始化继承过来的成员变量

    在构造函数体内赋值就是对的了