您的位置：首页 > Web前端 > CSS

CSS3 波浪简单模拟--我是波浪，我有起伏，有大波与小波（坏笑中...）

2016-04-21 16:56 357 查看

我是波浪，我有起伏，我有大波与小波（坏笑中...）
　　最近改版网站，一般也不会去写动画，但是有些网站还是需要的，故拿出一个较简单的动画出来分享，很简单很简单。

原理简单阐述
　　其实很简单，使用一张美工做好了的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>

好咯，代码附送完毕。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航