呼吸燈效果是一種常見(jiàn)的燈光效果，比如網(wǎng)頁(yè)的按鈕，現(xiàn)實(shí)生活中比如電腦的開(kāi)機(jī)按鈕。

使用CSS3的animation方法可以實(shí)現(xiàn)很多迷人的網(wǎng)頁(yè)動(dòng)畫(huà)特效。

使用CSS3 配合box-shadow即可實(shí)現(xiàn)類(lèi)似的效果

樣式代碼如下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.breathe-div {width: 100px;height: 100px;border: 1px solid #2b92d4;border-radius: 50%;text-align: center;cursor: pointer;margin:150px auto;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);overflow: hidden;-webkit-animation-timing-function: ease-in-out;-webkit-animation-name: breathe;-webkit-animation-duration: 1500ms;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate; }@-webkit-keyframes breathe {0% {opacity: .4;box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;}100% {opacity: 1;border: 1px solid rgba(59, 235, 235, 0.7);box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;} }

HTML 代碼

1	<div class="breathe-div"></div>

總結(jié)

以上是生活随笔為你收集整理的css3实现科技感的呼吸灯效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。