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

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

原理简单阐述

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

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

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

波浪动画CSS
  1. <style type="text/css">
  2.         /*
  3.  *  author: jasnature
  4.  *  email : 276227015@qq.com
  5.  *  last update : 2016-04-21
  6.  * */
  7.         .index_waves {
  8.             background: url("img/index_waves.png  这里放波浪图，图可以去演示地址抠出来") center 0 no-repeat;
  9.         }
  10.  
  11.         .wave3 {
  12.             height: 427px;
  13.             width: 2402px;
  14.             background-position: 0 0;
  15.         }
  16.  
  17.         .wave2 {
  18.             height: 427px;
  19.             width: 2402px;
  20.             background-position: 0 -427px;
  21.         }
  22.  
  23.         .wave1 {
  24.             height: 427px;
  25.             width: 2402px;
  26.             background-position: 0 -854px;
  27.         }
  28.  
  29.         @keyframes wave {
  30.             0% {
  31.                 transform: translate(0px, 0px);
  32.             }
  33.             50% {
  34.                 transform: translate(-80px, 30px);
  35.             }
  36.             100% {
  37.                 transform: translate(160px, -60px);
  38.             }
  39.         }
  40.  
  41.         @-webkit-keyframes wave {
  42.             0% {
  43.                 transform: translate(0px, 0px);
  44.             }
  45.             50% {
  46.                 transform: translate(-80px, 30px);
  47.             }
  48.             100% {
  49.                 transform: translate(160px, -60px);
  50.             }
  51.         }
  52.  
  53.         @-moz-keyframes wave {
  54.             0% {
  55.                 transform: translate(0px, 0px);
  56.             }
  57.             50% {
  58.                 transform: translate(-80px, 30px);
  59.             }
  60.             100% {
  61.                 transform: translate(160px, -60px);
  62.             }
  63.         }
  64.  
  65.         .waves {
  66.             position: absolute;
  67.             bottom: -135px;
  68.             height: 527px;
  69.             width: 100%;
  70.             overflow: hidden;
  71.         }
  72.  
  73.         .waves > div {
  74.             position: absolute;
  75.             left: -180px;
  76.             bottom: 0;
  77.         }
  78.  
  79.         .waves .wave1,
  80.         .waves .wave2,
  81.         .waves .wave3 {
  82.             animation: wave 5s ease-in-out alternate infinite;
  83.         }
  84.  
  85.         .waves .wave2 {
  86.             animation-delay: 0.6s;
  87.         }
  88.  
  89.         .waves .wave3 {
  90.             animation-delay: 1.2s;
  91.         }
  92.  
  93.         .waveContent {
  94.             position: relative;
  95.             background-color: #219df3;
  96.             height: 500px;
  97.         }
  98.  
  99.         h2 {
  100.             position: relative;
  101.             display: block;
  102.             color: #fff;
  103.             font-size: 48px;
  104.             font-family: "microsoft yahei";
  105.             font-weight: normal;
  106.             width: 1100px;
  107.             margin: 0 auto;
  108.             top: 180px;
  109.             z-index: 99;
  110.         }
  111.     </style>
波浪动画HTML
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>我是波浪，我有起伏，我有大波与小波（坏笑中...）</title>
  7.     </head>
  8.  
  9.     <body>
  10.         <div class="waveContent">
  11.             <h2>我是波浪，我有起伏，我有大波与小波（坏笑中...）</h2>
  12.             <div class="waves">
  13.                 <div class="index_waves wave1">
  14.  
  15.                 </div>
  16.                 <div class="index_waves wave2">
  17.  
  18.                 </div>
  19.                 <div class="index_waves wave3">
  20.  
  21.                 </div>
  22.             </div>
  23.         </div>
  24.  
  25.     </body>
  26.  
  27. </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. UnityEditor

    1.添加菜单 [MenuItem("Tools/MyTool")] [MenuItem("Tools/MyTool", false, 10)] 优先级控制菜单的 ...

  2. System.Web.HttpRequestValidationException: A potentially dangerous Request.F

    ASP.NET .0验证请求 System.Web.HttpRequestValidationException: A potentially dangerous Request.F System.W ...

  3. 【bzoj1672】[USACO2005 Dec]Cleaning Shifts 清理牛棚

    题目描述 Farmer John's cows, pampered since birth, have reached new heights of fastidiousness. They now ...

  4. IIS网站或系统验证码不显示问题——"使用了托管的处理程序，但是未安装或未完整安装 ASP.NET"

    在IIS上发布了一个系统,但是登陆页面的验证码图片一直出不来,尝试了各种办法,权限.路径.继承父类路径等都不管用,进入Login.html,对着无验证码图片的图标,右键复制图片的网址,粘贴到地址栏,出 ...

  5. leetcode一些常用函数

    6移位操作 “>> 右移,高位补符号位” 这里右移一位表示除2“>>> 无符号右移,高位补0”: 与>>类似“<< 左移” 左移一位表示乘2,二位 ...

  6. theano学习

    import numpy import theano.tensor as T from theano import function x = T.dscalar('x') y = T.dscalar( ...

  7. angular $http 与form表单的select-->refine

    <!DOCTYPE html> <html ng-app="a2_15"> <head> <meta http-equiv="C ...

  8. struts2笔记（3）

    关于回显: 如果是int型,默认就会回显为0,如果不想让回显,则Integer就好 //**************************************声明式验证************* ...

  9. C# IEnumberable & IQueryable 区别

    转自 http://blog.csdn.net/daimeisi123/article/details/46976093 在应用到IEnumberable 和IQueryable两个接口时,代码往往很 ...

  10. asp.net 读取导入的project（mpp）文件

    公司项目有用到读取project文件(.mpp)并保存到指定数据库类似的功能. 查了一下大家总结的方法. 找到一哥们代码,初步判断可行,特此收藏. using System.IO; using Mic ...