< meta http-equiv = " content-type " content = " text/html;charset=utf-8 " /> < title > 呼吸灯 </ title > < style type = " text/css " > /* css代码 */ .breath_light { width : 300px ; /* 宽度 */ height : 300px ; /* 高度 */ border : #666 1px solid ; border-radius : 50% ; opacity : 0.1 ; /* 不透明度 */ overflow : hidden ; /* 溢出隐藏 */ background : #FF3 ; /* 背景色 */ margin : 25% auto ; /* 外边距 */ /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */ animation-name : breath ; /* 动画名称 */ animation-duration : 3s ; /* 动画时长3秒 */ animation-timing-function : ease-in-out ; /* 动画速度曲线：以低速开始和结束 */ animation-iteration-count : infinite ; /* 播放次数：无限 */ /* Safari and Chrome */ -webkit-animation-name : breath ; /* 动画名称 */ -webkit-animation-duration : 3s ; /* 动画时长3秒 */ -webkit-animation-timing-function : ease-in-out ; /* 动画速度曲线：以低速开始和结束 */ -webkit-animation-iteration-count : infinite ; /* 播放次数：无限 */ @keyframes breath { from { opacity : 0.1 ; } /* 动画开始时的不透明度 */ 50% { opacity : 1 ; } /* 动画50% 时的不透明度 */ to { opacity : 0.1 ; } /* 动画结束时的不透明度 */ @-webkit-keyframes breath { from { opacity : 0.1 ; } /* 动画开始时的不透明度 */ 50% { opacity : 1 ; } /* 动画50% 时的不透明度 */ to { opacity : 0.1 ; } /* 动画结束时的不透明度 */ </ style > </ head > < div class = " breath_light " title = " 呼吸灯 " > </ div > </ body > </ html >

以上就是关于“ CSS3特效 - 呼吸灯效果 ” 的全部内容。

1. 效果图2. 代码如下&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=utf-8&quot;/&amp;gt; &amp;lt;title&amp;gt;呼吸灯&amp;lt;/title&amp;gt; &amp;lt <img src="./../assets/icon_tasks.png" v-if="showDot" class="rightTask taskAnimation" @click="jumpTasks"> <img src="./../assets/icon_tasks.png" v-i