ホームページ > 記事 > ウェブフロントエンド > CSS3勉強記(1) - 色褪せたtext_html/css_WEB-ITnose
CSS3勉強記(1) - 色褪せたtext_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:35:551114ブラウズ
今日はここ数日で学んだことを共有する時間があります。どれも単純なことですが、千マイルの旅は一歩から始まります。私はゆっくりと歩いていますが、前進を止めていません。 ~~~~
私が作成した「フェードテキスト」の最終的な動的効果を見てみましょう:
上記のアニメーション効果を作成するプロセスは次のとおりです:
(1) まず、透明度を変更してアニメーションをカスタマイズします。 0 から 1 までを変更し、アニメーションでこのアニメーション効果を呼び出します
(2) テキストの異なる行が表示される時間に注意してください。これはアニメーションの遅延属性によって実現できます
(3) 最終的なダイナミックを指定します。テキストの値はアニメーションの最終的な表示状態です。そうでない場合、テキストは自動的に消えた後に表示されません。これは、animation-fill-mode で実現できます
1. まず HTML でプログラムを見てみましょう。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>淡入的文字</title> <link type="text/css" rel="stylesheet" href="css/animate.css" /> </head> <body> <div class="fade-in-words"> <div class="first-words">山一程，水一程，</div> <div class="second-words">身向榆关那畔行，</div> <div class="third-words">夜深千帐灯。</div> <div class="four-words">风一更，雪一更，</div> <div class="five-words">聒碎乡心梦不成，</div> <div class="six-words">故园无此声。</div> </div> </body></html>
上のプログラムは主に最初に詩を見つけました。La~~~~~それが何を意味するかは推測しないでください
次に、CSS スタイル (主に CSS3) を見てください。 )
.fade-in-words{ width: 200px; margin: 0 auto; text-align: center;}/*自定义一个透明度从0到1的动画，它的名称是fade-in*/@keyframes fade-in{ 0%{ opacity: 0;} 100%{opacity:1;}}@-webkit-keyframes fade-in{ 0%{ opacity: 0;} 100%{opacity:1;}}@-ms-keyframes fade-in{ 0%{ opacity: 0;} 100%{opacity:1;}}@-o-keyframes fade-in{ 0%{ opacity: 0;} 100%{opacity:1;}}@-moz-keyframes fade-in{ 0%{ opacity: 0;} 100%{opacity:1;}}.first-words{ opacity: 0; /*实先规定文字的状态是不显示的*/ animation: fade-in 4s ease 0s 1; /*调用名称为fade-in的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/ -webkit-animation: fade-in 4s ease 0s 1; -moz-animation: fade-in 4s ease 0s 1; -o-animation: fade-in 4s ease 0s 1; -ms-animation: fade-in 4s ease 0s 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; }.second-words{ opacity: 0; animation: fade-in 4s ease 2s 1; -webkit-animation: fade-in 4s ease 2s 1; -moz-animation: fade-in 4s ease 2s 1; -o-animation: fade-in 4s ease 2s 1; -ms-animation: fade-in 4s ease 2s 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; }.third-words{ opacity: 0; animation: fade-in 4s ease 4s 1; -webkit-animation: fade-in 4s ease 4s 1; -moz-animation: fade-in 4s ease 4s 1; -o-animation: fade-in 4s ease 4s 1; -ms-animation: fade-in 4s ease 4s 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; }.four-words{ opacity: 0; animation: fade-in 4s ease 6s 1; -webkit-animation: fade-in 4s ease 6s 1; -moz-animation: fade-in 4s ease 6s 1; -o-animation: fade-in 4s ease 6s 1; -ms-animation: fade-in 4s ease 6s 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; }.five-words{ opacity: 0; animation: fade-in 4s ease 8s 1; -webkit-animation: fade-in 4s ease 8s 1; -moz-animation: fade-in 4s ease 8s 1; -o-animation: fade-in 4s ease 8s 1; -ms-animation: fade-in 4s ease 8s 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; }.six-words{ opacity: 0; animation: fade-in 4s ease 10s 1; -webkit-animation: fade-in 4s ease 10s 1; -moz-animation: fade-in 4s ease 10s 1; -o-animation: fade-in 4s ease 10s 1; -ms-animation: fade-in 4s ease 10s 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; } 上記の手順をコメントに明確に書きました。興味がある場合は、私が書いたコメントを読んでください。比較的単純で難しくないと思いますが、追加に注意する必要があります。ブラウザのプレフィックス、そうでなければ理解できます~~~~
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。