ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS3勉強記(1) - 色褪せたtext_html/css_WEB-ITnose

CSS3勉強記(1) - 色褪せたtext_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:35:55
オリジナル
1139 人が閲覧しました

今日はここ数日で学んだことを共有する時間があります。どれも単純なことですが、千マイルの旅は一歩から始まります。私はゆっくりと歩いていますが、前進を止めていません。 ~~~~

私が作成した「フェードテキスト」の最終的な動的効果を見てみましょう:

上記のアニメーション効果を作成するプロセスは次のとおりです:

(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; }
ログイン後にコピー

上記の手順をコメントに明確に書きました。興味がある場合は、私が書いたコメントを読んでください。比較的単純で難しくないと思いますが、追加に注意する必要があります。ブラウザのプレフィックス、そうでなければ理解できます~~~~

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート