CSS3-会呼吸的灯

效果图：

步骤一：

写好结构；div是这个小灯

步骤二：

清除默认样式；给body设置一个灰色的背景，为的是等下做灯的时候好看。

步骤三：

给这个div；设置相应宽高、边框、椭圆属性；设置阴影的值设置小一点，此时样式看不太清楚，为的是等下做动画会有个扩散；最后那条是设置div的背景颜色，这里选择了一个正常渐变色，从#ffc0cb过渡到#ff69b4颜色；此时设置完如下：

步骤四：

设置动画，从0.2透明度、带有阴影过渡到动画完成变成透明度1、加上边框颜色、阴影大点，有个扩散的感觉。

步骤五：

最后再div的CSS属性里添加上刚才设置的动画一直执行。一次的执行时间是2.5秒。

陈伟豪-12月份-CSS3-会呼吸的灯.zip (186.39 KB, 下载次数: 33)

2016-12-15 15:26 上传

点击文件名下载附件

CSS3-会呼吸的灯

效果图：

步骤一：

写好结构；div是这个小灯

步骤二：

清除默认样式；给body设置一个灰色的背景，为的是等下做灯的时候好看。

步骤三：

给这个div；设置相应宽高、边框、椭圆属性；设置阴影的值设置小一点，此时样式看不太清楚，为的是等下做动画会有个扩散；最后那条是设置div的背景颜色，这里选择了一个正常渐变色，从#ffc0cb过渡到#ff69b4颜色；此时设置完如下：

步骤四：

设置动画，从0.2透明度、带有阴影过渡到动画完成变成透明度1、加上边框颜色、阴影大点，有个扩散的感觉。

步骤五：

最后再div的CSS属性里添加上刚才设置的动画一直执行。一次的执行时间是2.5秒。

陈伟豪-12月份-CSS3-会呼吸的灯.zip (186.39 KB, 下载次数: 33)

2016-12-15 15:26 上传

点击文件名下载附件