CSS3特效-呼吸灯效果1 .效果图
2 .代码如下： doctypehtmlhtmlheadmetahttp-equiv=' content-type ' content=' text/html； charset=utf-8'/title呼吸机/titlestyletype=' text/CSS '/* CSS代码*/.breath_light { width: 300px； /*宽*/height: 300px； /*高度*/border : # 666 1px实体； border-radius:50%； opacity: 0.1； /*不透明度*/overflow: hidden； /*溢出隐藏* /背景： # ff3； /*背景色*/margin : 25 %自动； //ie10、Firefox and Opera和IE9及更早版本不支持*/animation-name: breath； /*动画名称*/animation-duration: 3s； /*动画时间3秒*/animation-timing-function :多功能一体机； /*动画速度曲线：低速开始和结束*/animation-iteration-count : infinite； /*播放次数：无限*//* safariandchrome *//-WebKit-animation-name 3360 breath； //- WebKit-animation-duration :3 s； //- WebKit-animation-timing-function :多功能一体机； /*动画速度曲线：慢速开始和结束*//-WebKit-animation-iteration-count 3360 infinite； /*播放次数：无限*/} @ key frames breath { from { opacity :1； } /*动画开始时的不透明度*/50% { opacity: 1； } /*视频50%时的不透明度*/to { opacity: 0.1； } /*视频结束时的不透明度*/} @-WebKit-key frames breath { from { opacity 3360.1； } /*动画开始时的不透明度*/50% { opacity: 1； } /*视频50%时的不透明度*/to { opacity: 0.1； } /*视频结束时的不透明度*/}/style/headbodydivclass=' breath _ light ' title='呼吸灯'/div/body/html以上与“cs3特效-呼吸灯效果”相关