推荐一个设计的非常有创造力的动画

这个动画是在http://ellislab.com/codeigniter这个页面发现的，因为觉得他们写的这个动画非常有制作上的创意，觉得可以给大家分享一下。页面中的动画就是那几条飞来飞去的的线条，其实种效果在Flash里非常容易实现，但我发现这个是使用svg结合css完成，所以研究了一下。

利用svg制作一个线条镂空的模板

途中你看到的白色线条并不是线条，而是镂空的，因为网页背景是白色所以看上去像是白色的线条，如果网页背景是蓝色，那么看上应该是这个效果:

你可以使用浏览器直接（当然要支持svg的浏览器）打开svg就能查看效果

制作外壳

镂空的模板制作好了，现在制作外壳，定义class=box和class=mask的div，并给其样式

.box {
  background: #ff3c00;
  width: 100%;
  height: 500px; 
  position: relative;
}

.mask {
  background: transparent url("ci-spark-path.svg");
  background-size: auto;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 9000;
}

外壳制作好了，打开网页一看，红一片什么都看不出

制作夹层

外壳做好了以后，把夹层往里一方，就能透过svg镂空的线条看到夹层

在class=box节点里添加一个class=spark的div，并给其样式:

.spark {
  position: absolute;
  background: #fff;
  background-size: 100% 100%;
  width: 200px;
  height: 200px;
  top: 30%;
  left: 50%;
}

效果

只要spark飘到哪，镂空响应的mask镂空部分都会镂空地显示出来，因为镂空的形状像线条，并且spark的颜色为白色，所以看上就像是白色的线条，其实白色部分是一个spark正方形，如

画龙点睛

spark画的太难看，我们可以给它来点渐变，利用svg从中间向周围渐变。因为这个svg图片是白色的园，所以直接打开它看不到渐变，如果要在黑色网页背景中引入ci-spark.svg应该是这个效果

把spark的background改一下:

.spark {
  position: url(ci-spark.svg);
  background: #fff;
  background-size: 100% 100%;
  width: 200px;
  height: 200px;
  top: 30%;
  left: 50%;
}

此时透出来的效果就带渐变了

最后

这个动画充分利用了css与svg的特性，十分有创意，再结合css3 animation制作多个spark在不同的位置速度不一样的效果时即可实现多个线条舞动的效果。

查看DEMO点这里