當前位置：
首頁 >
css3实现科技感的呼吸灯效果
發布時間：2023/12/13
30
豆豆
生活随笔
收集整理的這篇文章主要介紹了
css3实现科技感的呼吸灯效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
呼吸燈效果是一種常見的燈光效果，比如網頁的按鈕，現實生活中比如電腦的開機按鈕。
使用CSS3的animation方法可以實現很多迷人的網頁動畫特效。
使用CSS3 配合box-shadow即可實現類似的效果
樣式代碼如下
| 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> |
總結
以上是生活随笔為你收集整理的css3实现科技感的呼吸灯效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何让Element UI的Messag
- 下一篇： 百度Echarts折线图tooltip里