未经授权，禁止复制转载。【未经授权禁止转载】

想在博客首页加一个波浪效果，谷歌了半天没本文版权归作者所有，未经授权不得转载。【转载请注明来源】有找到合适的代码，于是决定自己写一个。网未经授权，禁止复制转载。原创内容，盗版必究。上有一个使用canvas实现的，但是我觉转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。得既然css已经可以支持动画效果了，有没【原创内容，转载请注明出处】【原创不易，请尊重版权】有使用css实现的动画效果来实现我想要的【本文受版权保护】【原创不易，请尊重版权】海浪的效果呢？于是开始琢磨。

【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net【本文受版权保护】ngnet】原创内容，盗版必究。未经授权，禁止复制转载。

首先想到的，是如何制作波浪的外观，即波状【原创不易，请尊重版权】【版权所有，侵权必究】曲线。刚开始陷入误区，觉得一定要画出线来【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】，后来逐渐觉得，可以换个思路。波的产生是未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。什么原理？是能量的传播。能量在波中传播的著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net时候，不是靠物质的移动，对于水而言，其实未经授权，禁止复制转载。【转载请注明来源】是一直在原地上下波动，并没有像视觉上看到本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net的在前进。既然自然原理是这样的，那么我们【版权所有，侵权必究】原创内容，盗版必究。在实现效果的时候，也可以遵循这一原理。

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【版权所有，侵权必究】

首先，我们看到的是一片宁静的海面：

【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。et 获取更多精彩内容】【原创不易，请尊重版权】

【未经授权禁止转载】【版权所有】唐霜 www.tangshu【本文受版权保护】转载请注明出处：www.tangshuang.netang.net

当海底某处发生地震时，这个海域的海水被地【版权所有，侵权必究】转载请注明出处：www.tangshuang.net震波的能量顶出海面。我们姑且将这个水域看【原创内容，转载请注明出处】【原创不易，请尊重版权】作一个整体，海水将高出海平面很多：

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

未经授权，禁止复制转载。【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。

而隔壁的海域由于受到影响，也发生了同样的原创内容，盗版必究。【作者：唐霜】情况，但是由于时间稍晚，当中心海域浪最高转载请注明出处：www.tangshuang.net【版权所有，侵权必究】的时刻，没那么高：

【原创内容，转载请注明出处】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】ang.net【转载请注明来源】

由此内推下去，再远一些的海域再晚一些。如著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net此下去，能量将会传播整个海域，如果不考虑本文作者：唐霜，转载请注明出处。【未经授权禁止转载】能量传播中的损耗，所有的浪高度都会是一样著作权归作者所有，禁止商业用途转载。【转载请注明来源】的。

原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

【版权所有，侵权必究】【原创内容，转载请注明出处】

上面是第一阶段，即当海底发生震动，将能量本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。释放出来的时刻。当海水达到最高点时，会往【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】下降。

原创内容，盗版必究。【访问 www.tangshuang.n【作者：唐霜】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】【原创内容，转载请注明出处】未经授权，禁止复制转载。

【版权所有，侵权必究】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】

著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】

著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【转载请注明来源】

如上所示，整个浪将会传向更远的海域。波浪【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】就是这样形成的。连续不断的波浪是由于海底【转载请注明来源】【版权所有】唐霜 www.tangshuang.net地震连续不断的顶起海水，形成的。所以，最未经授权，禁止复制转载。【作者：唐霜】终实际上整个波浪效果，是由单个柱体的循环【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】上下运动，以及不同柱体运动上的时间差形成本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】的一个效果。

【作者：唐霜】【作者：唐霜】【本文受版权保护】【本文受版权保护】

根据这个原理，把柱体的宽度缩小，小到消除著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】柱体之间的高度差，那样就看上去是一条连续【未经授权禁止转载】原创内容，盗版必究。运动的线形成的波浪效果。

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

根据这个思路，用css和js来实现他们。

【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

首先，我们需要一个海洋：

【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netang.net本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu【本文受版权保护】本文版权归作者所有，未经授权不得转载。ang.net

<div class="ocean" id="ocean1"></div>

其次，我们需要海洋中的柱体：

原创内容，盗版必究。未经授权，禁止复制转载。

<script>
function addWaves(id, width) {
  var ocean = document.getElementById(id)
  var count = Math.floor(ocean.clientWidth/width)
  var docFrag = document.createDocumentFragment()
  for(let i = 0; i < count; i ++) {
    let wave = document.createElement("div")
    wave.className = "wave"
    wave.style.width = width + "px"
    wave.style.left = width * i + "px"
    docFrag.appendChild(wave)
  }
  ocean.appendChild(docFrag)
}
addWaves("ocean1", 5) // 规定每个柱体宽度为5像素
</script>

<style>
.ocean {
  position: relative;
}
.ocean .wave {
  position: absolute;
  bottom: 0;
  height: 100%;
}
/* 上面是基础的css，下面可以根据你当前的需要调整样式 */
#ocean1 {
  width: 600px;
  height: 150px;
  margin-top: 100px;
}
#ocean1 .wave {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(0,50,150)), color-stop(1, rgb(0,150,255)));
}
</style>

这样，一个平静的海域就构建好了。

【关注微信公众号：wwwtangshua未经授权，禁止复制转载。【未经授权禁止转载】ngnet】【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】

接下来就是构建动态的效果。利用css3的【原创内容，转载请注明出处】【本文首发于唐霜的博客】keyframes来实现一个循环的动画帧本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net，使海水动起来。新增如下样式：

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

@-webkit-keyframes wave {
  0% {  height: 100%;  }
  50% {  height: 120%;  }
  100%{   height: 100%;  }
}
.ocean .wave {
  animation: wave 2s infinite ease-in-out;
}

添加这段css之后，你发现，整个海平面都【作者：唐霜】原创内容，盗版必究。在一起上下运动……所以，我们要继续处理延【未经授权禁止转载】未经授权，禁止复制转载。时的问题。延时的话在css里面有一个an【未经授权禁止转载】未经授权，禁止复制转载。imation-delay属性。但是我们【原创内容，转载请注明出处】原创内容，盗版必究。必须要让每一个wave的delay大于前【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】一个，所以只能在js里面动态添加这个属性【本文首发于唐霜的博客】【本文首发于唐霜的博客】，在上面的js里面，给每个wave设置s转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。tyle的地方再增加一条：

【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】et 获取更多精彩内容】【未经授权禁止转载】【原创不易，请尊重版权】原创内容，盗版必究。

wave.style.width = width + "px"wave.style.left = width * i + "px"
wave.style.animationDelay = (i/100) + "s"

增加了一个animationDelay，著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】这样就可以让每一个wave的动画延时执行著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】，i/100是说把时间间隔缩小到以1/1【本文受版权保护】本文作者：唐霜，转载请注明出处。00s为单位。

【本文受版权保护】本文作者：唐霜，转载请注明出处。

这样，怎个波浪就动起来了，实现了我们想要【本文受版权保护】【版权所有】唐霜 www.tangshuang.net的效果。不过这个效果里面有一点不是很好，原创内容，盗版必究。【原创不易，请尊重版权】就是如果5px作为一个柱体的宽度的话，会【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。有明显的锯齿效果，想要消除锯齿，最好是让【转载请注明来源】著作权归作者所有，禁止商业用途转载。柱体的宽度等于1px，并且让柱体之间的延【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。时变小，也就是说两个柱体之间的连续性更好【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net，这样锯齿就相对没有那么明显。但由于延时【版权所有】唐霜 www.tangshuang.net【本文受版权保护】变小，波浪的速度就会变快，波长也就会变小【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net。总之最终代码如下：

【版权所有】唐霜 www.tangshu原创内容，盗版必究。【转载请注明来源】ang.net本文版权归作者所有，未经授权不得转载。

<!doctype html>
<head>
<meta charset="utf-8">
<title>ocean</title>
<style>
@-webkit-keyframes wave {
  0% {  height: 100%;  }
  50% {  height: 120%;  }
  100%{   height: 100%;  }
}
.ocean {
  position: relative;
}
.ocean .wave {
  position: absolute;
  bottom: 0;
  height: 100%;
  animation: wave 2s infinite ease-in-out;
}
.ocean {
  width: 600px;
  height: 150px;
  margin-top: 100px;
}
.ocean .wave {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(0,50,150)), color-stop(1, rgb(0,150,255)));
}
</style>
</head>

<body>
<div class="ocean" id="ocean1"></div>
<br>
<div class="ocean" id="ocean2"></div>
<br>
<div class="ocean" id="ocean3"></div>
<script>
/**
 * id: 要获取的div元素的id属性
 * width: 每一个wave柱体的宽度，单位px
 * duration: 每一个wave柱体上下运动一个循环的时长，单位s
 * delay: 当前运动的这个柱体相对于上一个柱体开始运动的延时，单位s
 */
function addWaves(id, width, duration, delay) {
  var ocean = document.getElementById(id)
  var count = Math.floor(ocean.clientWidth/width)
  var docFrag = document.createDocumentFragment()
  for(let i = 0; i < count; i ++) {
    let wave = document.createElement("div")
    wave.className = "wave"
    wave.style.width = width + "px"
    wave.style.left = (width * i) + "px"
    wave.style.animationDelay = (i * delay) + "s"
    wave.style.animationDuration = duration + "s"
    docFrag.appendChild(wave)
  }
  ocean.appendChild(docFrag)
}
addWaves("ocean1", 5, 2, 1/100)
addWaves("ocean2", 1, 2, 1/100)
addWaves("ocean3", 1, 1.5, 1/1000)
</script>
</body>
</html>

注意一下addWaves函数，当widt【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。h和delay取值不同时，得到的效果也不本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。同。width是柱体的宽度，不能太大，d【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。elay是第二个柱体相对于第一个柱体开始【版权所有】唐霜 www.tangshuang.net【转载请注明来源】运动的延时时间，单位为妙，因此这里都是按【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net1/100以下作为单位的。波峰为ocea【作者：唐霜】【原创不易，请尊重版权】n高度的120%（写死在css里面的），本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】一个波长为：waveWith = width * duration / delay，如果你的ocean宽度大于波长，就可以原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net在可视区域内看到oceanWidth/waveWith个浪头。这与你的设计非常相关。

【作者：唐霜】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【原创不易，请尊重版权】

好了，关于波浪的实现就到这里，希望对你有本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。用。

【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ng.net著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

2017-02-18 13410