你的位置:首页 > 网页设计

[网页设计]CSS3 波浪简单模拟


我是波浪,我有起伏,我有大波与小波(坏笑中...)

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

 

原理简单阐述

  其实很简单,使用一张美工做好了的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>

 

 

好咯,代码附送完毕。