CSS3_html/css_WEB-ITnose で実装された文字列強調表示効果のコード例-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3_html/css_WEB-ITnose で実装された文字列強調表示効果のコード例

Jun 24, 2016 am 11:32 AM

CSS3 によって実装された文字列強調表示効果のコード例:
この章では、文字列文字強調表示効果を実装するコード例を共有します。
コードは次のとおりです:

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;author&quot; content=&quot;http://www.softwhy.com/&quot; /&gt;&lt;title&gt;蚂蚁部落&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;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; }&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;width:200px;margin:0 auto;&quot;&gt;&lt;p&gt;  &lt;span class=&quot;word1&quot;&gt;L&lt;/span&gt;  &lt;span class=&quot;word2&quot;&gt;O&lt;/span&gt;  &lt;span class=&quot;word3&quot;&gt;A&lt;/span&gt;  &lt;span class=&quot;word4&quot;&gt;D&lt;/span&gt;  &lt;span class=&quot;word5&quot;&gt;I&lt;/span&gt;  &lt;span class=&quot;word6&quot;&gt;N&lt;/span&gt;  &lt;span class=&quot;word7&quot;&gt;G&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=17250

詳細については、次を参照してください: http:// www.softwhy.com/shili/

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。