黑马程序员技术交流社区
标题: 纯CSS3效果-会呼吸的灯---出自黑马深圳中心 [打印本页]
作者: 陈伟豪 时间: 2016-12-15 15:28
标题: 纯CSS3效果-会呼吸的灯---出自黑马深圳中心
本帖最后由 陈伟豪 于 2016-12-15 15:30 编辑
CSS3-会呼吸的灯
效果图:
步骤一:
写好结构;div是这个小灯
步骤二:
清除默认样式;给body设置一个灰色的背景,为的是等下做灯的时候好看。
步骤三:
给这个div;设置相应宽高、边框、椭圆属性;设置阴影的值设置小一点,此时样式看不太清楚,为的是等下做动画会有个扩散;最后那条是设置div的背景颜色,这里选择了一个正常渐变色,从#ffc0cb过渡到#ff69b4颜色;此时设置完如下:
步骤四:
设置动画,从0.2透明度、带有阴影过渡到动画完成变成透明度1、加上边框颜色、阴影大点,有个扩散的感觉。
步骤五:
最后再div的CSS属性里添加上刚才设置的动画一直执行。一次的执行时间是2.5秒。
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |