CSS3呼吸燈效果

admin發表於2018-08-31
CSSS3

下面是一個由CSS3實現的呼吸燈效果，裡面涉及到一些CSS3相關屬性的應用。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
body {
  background: #333;
}
.btn {
  margin: 100px auto;
  width: 120px;
  height: 20px;
  border: 1px solid #FFC0CB;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  background-image:linear-gradient(#FFC0CB, #FF69B4);
  animation: breath 2500ms infinite ease-in-out alternate;
  cursor: pointer;
}
@keyframes breath {
  0% {
    opacity: .2;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    border: 1px solid rgba(255, 192, 203, 1);
    box-shadow: 0 1px 30px rgba(255, 192, 203, 1);
  }
}
</style>
</head>
<body>
<div class="btn"></div>
</body>
</html>

上面程式碼實現了預期效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
* {
  margin: 0;
  padding: 0;
}

簡單的初始化效果，將所有元素的內邊距和外邊距設定為0。

[CSS] 純文字檢視 複製程式碼
body {
  background: #333;
}

設定body的背景顏色為#333。

[CSS] 純文字檢視 複製程式碼
.btn {
  margin: 100px auto;
  width: 120px;
  height: 20px;
  border: 1px solid #FFC0CB;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  background-image:linear-gradient(#FFC0CB, #FF69B4);
  animation: breath 2500ms infinite ease-in-out alternate;
  cursor: pointer;
}

通過margin: 100px auto將元素設定為水平居中效果。

設定div元素的寬為120px，高為20px。

通過border-radius: 5px設定元素的圓角效果。

box-shadow: 0 1px 2px rgba(0, 0, 0, .3)設定元素的陰影效果，通過主鍵改變此屬性值實現呼吸燈效果。

background-image:linear-gradient(#FFC0CB, #FF69B4)實現元素背景漸變效果。

[CSS] 純文字檢視 複製程式碼
@keyframes breath {
  0% {
    opacity: .2;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    border: 1px solid rgba(255, 192, 203, 1);
    box-shadow: 0 1px 30px rgba(255, 192, 203, 1);
  }
}

通過動畫幀方式設定元素各個屬性的變化，最終完整實現呼吸燈效果。

二.相關閱讀:

（1）.border-radius參閱CSS3 border-radius一章節。

（2）.box-shadow參閱CSS3 box-shadow一章節。

（3）.線性漸變參閱CSS3 linear-gradient()線性漸變一章節。

（4）.animation參閱CSS3 animation一章節。

（5）.@keyframes參閱CSS3 @keyframes一章節。

相關文章