CSS3实现的字符串逐字高亮效果代码实例_html/css

CSS3实现的字符串逐字高亮效果代码实例_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:32:25

Original

2172 people have browsed it

CSS3实现的字符串逐字高亮效果代码实例:
本章节分享一段代码实例，它实现了字符串逐字高亮效果。
代码如下:

<!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: #aaaaaa;}p span{  font-family: 'Comic Sans MS';  animation: loading 1.4s;  -moz-animation: loading 1.4s;  -webkit-animation: loading 1.4s;  animation-iteration-count: infinite;  -webkit-animation-iteration-count: infinite;}@keyframes loading{  0% {color: black;}  75% {color: black;}  100% {color: white;}}@-moz-keyframes loading {  0% {color: black;}  75% {color: black;}  100% {color: white;}}@-webkit-keyframes loading{  0% {color: black;}  75% {color: black;}  100% {color: white;}}.word1{  animation-delay:-1.2s;  -webkit-animation-delay:-1.2s;}.word2{  animation-delay:-1s;  -webkit-animation-delay:-1s;}.word3{  animation-delay:-0.8s;  -webkit-animation-delay:-0.8s;}.word4{  animation-delay:-0.6s;  -webkit-animation-delay:-0.6s; }.word5{  animation-delay:-0.4s;  -webkit-animation-delay:-0.4s;}.word6{  animation-delay:-0.2s;  -webkit-animation-delay:-0.2s; }.word7{  animation-delay:0s;  -webkit-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>

Copy after login

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=17250

更多内容可以参阅:http://www.softwhy.com/shili/