黑马程序员技术交流社区

标题: 纯CSS3效果-会呼吸的灯---出自黑马深圳中心 [打印本页]

作者: 陈伟豪    时间: 2016-12-15 15:28
标题: 纯CSS3效果-会呼吸的灯---出自黑马深圳中心
本帖最后由 陈伟豪 于 2016-12-15 15:30 编辑
CSS3-会呼吸的灯

效果图:



步骤一:
写好结构;div是这个小灯


步骤二:
清除默认样式;给body设置一个灰色的背景,为的是等下做灯的时候好看。

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


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

步骤五:
最后再divCSS属性里添加上刚才设置的动画一直执行。一次的执行时间是2.5秒。

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







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2