我是波浪，我有起伏，我有大波与小波（坏笑中...）

　　最近改版网站，一般也不会去写动画，但是有些网站还是需要的，故拿出一个较简单的动画出来分享，很简单很简单。

原理简单阐述

　　其实很简单，使用一张美工做好了的2400px宽度的3个不同起伏的波浪，然后自己合成为一张【精灵图片】（有助于一起加速加载和同时加载）

有了素材就好办了，使用一个容器把3个div背景的波浪堆在一起，然后使用css3的偏移进行移动，当然左右和上下都要，然后慢慢调整为一个适合的时间和延迟。

废话不多说，先上演示地址：http://sandbox.runjs.cn/show/akodn0vt

波浪动画CSS
<style type="text/css">

        /*

 *  author: jasnature

 *  email : 276227015@qq.com

 *  last update : 2016-04-21

 * */

        .index_waves {

            background: url("img/index_waves.png  这里放波浪图，图可以去演示地址抠出来") center 0 no-repeat;

        }

        .wave3 {

            height: 427px;

            width: 2402px;

            background-position: 0 0;

        }

        .wave2 {

            height: 427px;

            width: 2402px;

            background-position: 0 -427px;

        }

        .wave1 {

            height: 427px;

            width: 2402px;

            background-position: 0 -854px;

        }

        @keyframes wave {

            0% {

                transform: translate(0px, 0px);

            }

            50% {

                transform: translate(-80px, 30px);

            }

            100% {

                transform: translate(160px, -60px);

            }

        }

        @-webkit-keyframes wave {

            0% {

                transform: translate(0px, 0px);

            }

            50% {

                transform: translate(-80px, 30px);

            }

            100% {

                transform: translate(160px, -60px);

            }

        }

        @-moz-keyframes wave {

            0% {

                transform: translate(0px, 0px);

            }

            50% {

                transform: translate(-80px, 30px);

            }

            100% {

                transform: translate(160px, -60px);

            }

        }

        .waves {

            position: absolute;

            bottom: -135px;

            height: 527px;

            width: 100%;

            overflow: hidden;

        }

        .waves > div {

            position: absolute;

            left: -180px;

            bottom: 0;

        }

        .waves .wave1,

        .waves .wave2,

        .waves .wave3 {

            animation: wave 5s ease-in-out alternate infinite;

        }

        .waves .wave2 {

            animation-delay: 0.6s;

        }

        .waves .wave3 {

            animation-delay: 1.2s;

        }

        .waveContent {

            position: relative;

            background-color: #219df3;

            height: 500px;

        }

        h2 {

            position: relative;

            display: block;

            color: #fff;

            font-size: 48px;

            font-family: "microsoft yahei";

            font-weight: normal;

            width: 1100px;

            margin: 0 auto;

            top: 180px;

            z-index: 99;

        }

    </style>
波浪动画HTML
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>我是波浪，我有起伏，我有大波与小波（坏笑中...）</title>

    </head>

    <body>

        <div class="waveContent">

            <h2>我是波浪，我有起伏，我有大波与小波（坏笑中...）</h2>

            <div class="waves">

                <div class="index_waves wave1">

                </div>

                <div class="index_waves wave2">

                </div>

                <div class="index_waves wave3">

                </div>

            </div>

        </div>

    </body>

</html>

好咯，代码附送完毕。

CSS3 波浪简单模拟--我是波浪，我有起伏，有大波与小波（坏笑中...）的更多相关文章

  1. java web学习总结(二十二) -------------------简单模拟SpringMVC

    在Spring MVC中,将一个普通的java类标注上Controller注解之后,再将类中的方法使用RequestMapping注解标注,那么这个普通的java类就够处理Web请求,示例代码如下: ...

  2. WPF简单模拟QQ登录背景动画

    介绍 之所以说是简单模拟,是因为我不知道QQ登录背景动画是怎么实现的.这里是通过一些办法把它简化了,做成了类似的效果 效果图 大体思路 首先把背景看成是一个4行8列的点的阵距,X轴Y轴都是距离70.把 ...

  3. Linux 内核 链表 的简单模拟（2）

    接上一篇Linux 内核 链表 的简单模拟(1) 第五章:Linux内核链表的遍历 /** * list_for_each - iterate over a list * @pos: the & ...

  4. Linux 内核 链表 的简单模拟（1）

    第零章:扯扯淡 出一个有意思的题目:用一个宏定义FIND求一个结构体struct里某个变量相对struc的编移量,如 struct student { int a; //FIND(struct stu ...

  5. JavaWeb学习总结(四十九)——简单模拟Sping MVC

    在Spring MVC中,将一个普通的java类标注上Controller注解之后,再将类中的方法使用RequestMapping注解标注,那么这个普通的java类就够处理Web请求,示例代码如下: ...

  6. 简单模拟Hibernate的主要功能实现

    在学习期间接触到Hibernate框架,这是一款非常优秀的O/R映射框架,大大简化了在开发web项目过程中对数据库的操作.这里就简单模拟其底层的实现. /*******代码部分,及其主要注解***** ...

  7. 【HDU 4452 Running Rabbits】简单模拟

    两只兔子Tom和Jerry在一个n*n的格子区域跑,分别起始于(1,1)和(n,n),有各自的速度speed(格/小时).初始方向dir(E.N.W.S)和左转周期turn(小时/次). 各自每小时往 ...

  8. Jquery源码分析与简单模拟实现

    前言 最近学习了一下jQuery源码,顺便总结一下,版本:v2.0.3 主要是通过简单模拟实现jQuery的封装/调用.选择器.类级别扩展等.加深对js/Jquery的理解. 正文 先来说问题: 1. ...

  9. (hdu step 8.1.6)士兵队列训练问题(数据结构，简单模拟——第一次每2个去掉1个,第二次每3个去掉1个.知道队伍中的人数&lt;=3，输出剩下的人 )

    题目: 士兵队列训练问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

随机推荐

  1. mysql myisam简单分表设计

    一般来说,当我们的数据库的数据超过了100w记录的时候就应该考虑分表或者分区了,这次我来详细说说分表的一些方法.目前我所知道的方法都是MYISAM的,INNODB如何做分表并且保留事务和外键,我还不是 ...

  2. gradle多模块开发

    参考文档:gradle的官方userguide.pdf文档的chapter 55和chapter 56.gradle的多模块或项目开发一定不会比maven差,在我看来!大的项目分成多个模块来开发是常事 ...

  3. velocity中$springMacroRequestContext.getMessage($code)

    在Java国际化(i18n)中, vm页面显示内容需要使用 #springMessage("title") 实际运行时发现页面输出$springMacroRequestContex ...

  4. RabbitMQ之window安装步骤

    安装Rabbit MQ Rabbit MQ 是建立在强大的Erlang OTP平台上,因此安装Rabbit MQ的前提是安装Erlang.通过下面两个连接下载安装3.2.3 版本: 下载并安装 Era ...

  5. FSM（状态机）、HFSM（分层状态机）、BT（行为树）的区别

    游戏人工智能AI中最常听见的就是这三个词拉: FSM 这个不用说拉,百度一大堆解释, 简单将就是将游戏AI行为分为一个一个的状态,状态与状态之间的过渡通过事件的触发来形成. 比如士兵的行为有“巡逻”, ...

  6. 数据库mysql 基本命令

    .....= =.... 进入mysql: mysql -uroot ; 创建一个数据库: create database [数据库名字]; (注意最后的分号不能漏) 删除一个数据库:drop dat ...

  7. expect实现自动登录

    自动登录主机(ssh) 建脚本item2login.sh,包含如下内容 #!/usr/bin/expect set timeout 30 spawn ssh -p [lindex $argv 0] [ ...

  8. 3d转换-正方体-Html5Css3-遁地龙卷风

    (-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...

  9. mysql：ibdata1和mysql-bin log管理

    MySql ibdata1文件太大如何缩小 MySql innodb如果是共享表空间,ibdata1文件越来越大,达到了30多个G,对一些没用的表进行清空:truncate table xxx;然后o ...

  10. python基础七

    subprocess subprocess是专门用来替代os.system;os.spawn更加的先进. 但是subprocess.run()是在python3.5之后才出现的 实例 >> ...