Home > Developer > Web Develop
Example of a string literal highlighting effect code implemented by CSS3:
This section shares a code example that implements a string-by-word highlighting effect.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "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><Divstyle= "width:200px;margin:0 auto;"><P> <spanclass= "Word1">L</span> <spanclass= "Word2">O</span> <spanclass= "Word3">A</span> <spanclass= "Word4">D</span> <spanclass= "Word5">I</span> <spanclass= "Word6">N</span> <spanclass= "Word7">G</span></P></Div></Body></HTML>
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=17250
For more information, refer to: http://www.softwhy.com/shili/
CSS3 implementation of string literal highlighting effect code instance
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
