参考：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. 「题解」：毛一琛/$cow$ $subsets$

    问题 A: 毛一琛/$cow$ $subsets$ 时间限制: 1 Sec  内存限制: 512 MB 题面 题面谢绝公开. 题解 题名貌似是个大神??看起来像是签到题然后就死了. 首先$O(3^n) ...

  2. Python 爬取拉钩网工作岗位

    如果拉钩网html页面做了调整,需要重新调整代码 代码如下 #/usr/bin/env python3 #coding:utf-8 import sys import json import requ ...

  3. NX二次开发-获取切换按钮的当前状态UF_MB_ask_toggle_state

    NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...

  4. 移动端单选插件-jquery

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. docker实用参数

    docker images:查看docker镜像docker ls:查看运行中的docker 镜像docker run -d -p 80:80 -v /home/xxxxx/nginx-conf/ht ...

  6. 常用的css解决方案

    一. css 2.x code 1. 文字换行  /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: n ...

  7. SparkListener监听使用方式及自定义的事件处理动作

    本文针对spark 2.0+版本 概述 spark 提供了一系列整个任务生命周期中各个阶段变化的事件监听机制,通过这一机制可以在任务的各个阶段做一些自定义的各种动作.SparkListener便是这些 ...

  8. rmReport 自适应行高（自动行高）

    这个问题 1.先中主项数据--属性--stretched(伸展):true 选中主项数据中的所有列--属性--其他属性--自动折行 --伸展

  9. RDLC报表问题:尚未指定报表“Report1”的报表定义

    原文:尚未指定报表“Report1”的报表定义 在做RDLC项目中遇到这样的错误 本地报表处理期间出错. 尚未指定报表“Report1”的报表定义 未将对象引用设置到对象的实例. 解决方案: 打开re ...

  10. python自动化基础（参数化）

    一.创建加法类 #定义一个数学加法类 class Mathmethod(): def add(self,a,b): return(a+b) def sub(self,a,b): return(a-b) ...