呼吸燈效果是一種常見的燈光效果，比如網頁的按鈕，現實生活中比如電腦的開機按鈕。
使用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> |