参考：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. HDU6438 Buy and Resell 2018CCPC网络赛 -低买高卖-贪心经典题

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:Portal传送门  原题目描述在最下面.  出过很多次:5 ...

  2. 干货：Java正确获取客户端真实IP方法整理

    在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实I ...

  3. 干货：Java技术栈18年02月精彩好文汇总

    一晃眼,一个月过去了,新年也过完了. 一晃眼,又老了一岁了,感觉新的一年压力更大了. 我们也该为这一个月的技术做做汇总了,错过的同学正好可以统一回顾看看,已经看过的同学也可以再温习一下.. Java技 ...

  4. python子线程退出

    def thread_func(): while True: #do something #do something #do something t=threading.Thread(target = ...

  5. 买不到的数目 /// 结论公式 oj26316

    题目大意: 给定a b(这题题意不清 其实a b互质) 设变量x y(x>=0,y>=0),求 x*a+y*b=c 找到最大的不可能达到的c 如a=4 b=7 那么c=14 有这样一个定理 ...

  6. 从虚拟地址，到物理地址（开PAE）

    学了好久好久,但是好久好久都没有用过,今天突然要用,都快忘了怎么玩了, 这里记录一下吧. 如何检测PAE r cr4 第5位如果是1,则开了PAE,否则没开 切入目标进程 查找一个自己关注的字符串s ...

  7. 次梯度(Subgradient)

    参考链接:https://closure11.com/subgradient/

  8. Guarded Suspention 要等到我准备好

    线程在运行过程中需要停下来等待,然后再继续执行. 范例程序,一个线程(ClientThread)对另外一个线程(ServerThread)传递请求,实现一个模拟消息通道的功能. public clas ...

  9. 客户端IAP二次验证

    1.首先苹果IAP把每次购买抽象成了一个事务(SKPaymentTransaction), - (void)productsRequest:(SKProductsRequest *)request d ...

  10. leetcood学习笔记-82-删除排序链表中的重复元素二

    题目描述: 方法一: class Solution(object): def deleteDuplicates(self, head): """ :type head: ...