CSS3字串逐字高亮效果

admin發表於2017-11-23
CSSS3字串

本章節分享一段程式碼例項，它實現了字串逐字高亮效果。

特別說明：為了演示效果，將逐字高亮效果的時間設定的較長，可以自行調節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
html, body{
  background-color: #aaa;
}
p span{
  animation: loading 12s;
  animation-iteration-count: infinite;
}
@keyframes loading{
  0% {color: black;}
  75% {color: black;}
  100% {color: white;}
}
.word1{
  animation-delay:-12s;
}
.word2{
  animation-delay:-10s;
}
.word3{
  animation-delay:-8s;
}
.word4{
  animation-delay:-6s;
}
.word5{
  animation-delay:-4s;
}
.word6{
  animation-delay:-2s;
}
.word7{
  animation-delay:0s;
}
</style>
</head>
<body>
<div style="width:200px;margin:0 auto;">
<p>
  <span class="word1">L</span>
  <span class="word2">O</span>
  <span class="word3">A</span>
  <span class="word4">D</span>
  <span class="word5">I</span>
  <span class="word6">N</span>
  <span class="word7">G</span>
</p>
</div>
</body>
</html>

上面程式碼實現了逐字高亮效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
html, body{
  background-color: #aaa;
}

設定灰色背景顏色。

[CSS] 純文字檢視 複製程式碼
p span{
  animation: loading 12s;
  animation-iteration-count: infinite;
}

對span元素應用動畫效果，各個屬性的具體用法可以參閱相關閱讀。

[CSS] 純文字檢視 複製程式碼
@keyframes loading{
  0% {color: black;}
  75% {color: black;}
  100% {color: white;}
}

通過@keyframes規定在不同的時間段所要執行的動畫效果。

[CSS] 純文字檢視 複製程式碼
.word1{
  animation-delay:-12s;
}
.word2{
  animation-delay:-10s;
}

通過對animation-delay負值的應用，實現了逐個高亮效果，每一個時刻只有一個文字是高亮。

二.相關閱讀:

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

（2）.animation-iteration-count參閱CSS3 animation-iteration-count一章節。

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

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

相關文章