css3實現科技感的呼吸燈效果

呼吸燈效果是一種常見的燈光效果，比如網頁的按鈕，現實生活中比如電腦的開機按鈕。

使用CSS3的animation方法可以實現很多迷人的網頁動畫特效。

使用CSS3 配合box-shadow即可實現類似的效果

樣式代碼如下

 .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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247416.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247416.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247416.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！