本文由我司收集整编，推荐下载，如有疑问，请与我司联系

用

css3 

和

canvas 

实现的蜂窝动画效果

2014/07/20 20 

最近工作时研究了一下

css3 

动画和

js 

动画，主要是工作中为了

增强页面的趣味性，大家都有意无意的添加了很多动画效果，当然大部分都是

css3 

动画效果，可以

gpu 

加速，这会减少移动端的性能需求。

今天主要说的是蜂窝效果，具体效果大家等下可以运行源码，这里就不放

gif 

图

了。

css3 

的原理很简单，就是通过更改

background-size

，由于

css3 

中的

background 

中

可以设置

repeat 

属性，来使背景图片在

x,y 

方向平铺。一开始先设置

background- 

size:10%, 

10%

，（这个数

可以自由定义，但不介意设置过大，否则效果不明显）

, 

最后更改

backg-size

：

100%, 

100%

；这样会使背景图片充满整个屏幕，哦，对了不

要忘记设置

background-position

：

50% 

50%

；否则你会感觉怪怪的，设置

background-position 

是为了是背景图片以中心点的位置来平铺，而系统默认会已左上

角来平铺。然后通过设置

animation 

动画来调用动画就可以实现这种效果了

pre 

name= 

code 

>position: 

absolute;top: 

0;left: 

0;height: 

100%;width: 

100%;background: 

url(2.jpg) 

repeat;background-size: 

30% 

30%;background-position: 

center 

center;-webkit-animation: 

honeycomb 

3s 

1 

linear;}@-webkit-keyframes 

honeycomb 

{0% 

{background-size: 

10% 

10%;}100% 

{background-size: 

100% 

100%;}} 

使用

css3 

来实现这种蜂窝式的动画效果，原理简单，并且效果很完美，但是唯一一

点的不完美在于可能会有一部分手机不兼容。并且通过在

animation 

中修改

background-size

，这种行为很少，虽然不会引起浏览器的重排，但是也会引起浏览

器的局部重绘。

至于使用

canvas 

来实现吗，这个纯属无聊，不建议大家使用这种方法，在这里使

用

canvas 

来绘制，完全是属于我的无聊之举，不过若是你对

canvas 

动画有意向，可

以留意下面的

canvas 

实现方案。

canvas 

绘制的原理很简单，通过传入

width,height 

的百分比，来计算一共需要画多少个矩形，以及每个矩形的中心点坐标。我把这个

代码封装成了一个模块，大家可以一步一步的往下看，首先先定义一个对象

honey