ホームページ > 記事 > ウェブフロントエンド > 【css】cssで絵を描きたい(5)_html/css_WEB-ITnose
【css】cssで絵を描きたい(5)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:471021ブラウズ
前回の【css】に続き、cssを使って絵を描いていきます(4) 今回はシャオミンとジンジンに簡単なアニメーション効果を使ってセリフを追加していきます。
github: https://github.com/bee0060/Css-Paint、完全なコードはpages/sun-house-4.html および関連 CSS にあります。
demo: http://bee0060.github .io/Css-Paint/pages/sun-house/sun-house-5.html
完全な HTML は次のとおりです:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css Paint</title> 6 <link rel="stylesheet" type="text/css" href="../css/sun.css" /> 7 <link rel="stylesheet" type="text/css" href="../css/house.css" /> 8 <link rel="stylesheet" type="text/css" href="../css/human.css" /> 9 <link rel="stylesheet" type="text/css" href="../css/cloud.css" />10 11 <link rel="stylesheet" type="text/css" href="../css/human-animate.css" />12 </head>13 <body>14 <div class="sun">15 <div class="sun-body"></div>16 <div class="sun-shine-light sun-shine-light1"></div>17 <div class="sun-shine-light sun-shine-light2"></div>18 <div class="sun-shine-light sun-shine-light3"></div>19 <div class="sun-shine-light sun-shine-light4"></div>20 <div class="sun-shine-light sun-shine-light5"></div>21 </div>22 23 <div class="house-width house">24 <div class="house-width house-roof house-roof-left"></div>25 <div class="house-width house-roof house-roof-right"></div>26 <div class="house-width house-wall"> 27 <div class="house-wall-door"> 28 <div class="house-wall-door-handle"></div>29 </div>30 </div>31 </div>32 33 <div class="human human-pos-1">34 <p class="lines human-speak">大家好，我叫小明。</p>35 <p class="lines human-speak human-speak-delay-3">我是一个程序员，最喜欢宅在家里LOL。</p>36 <p class="lines human-speak human-speak-delay-12">静静，我们交个朋友好吗？我的电话是13800123456。</p>37 <div class="human-head-normal"></div>38 <div class="human-body-normal"></div>39 <div class="human-arms-normal"></div>40 <div class="human-legs-normal"></div>41 </div>42 43 <div class="human human-pos-2">44 <p class="lines human-speak human-speak-delay-6">大家好，我叫静静</p>45 <p class="lines human-speak human-speak-delay-9">和大家看到的一样，我热爱舞蹈。</p>46 <p class="lines human-speak human-speak-delay-15">不要，程序员什么的最讨厌了！</p>47 <div class="human-head-normal"></div>48 <div class="human-body-normal"></div>49 <div class="human-arms-normal"></div>50 <div class="human-legs-1"></div>51 </div>52 53 <div class="cloud cloud-pos cloud-pos-1">54 <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>55 <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>56 <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>57 <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>58 </div>59 <div class="cloud cloud-pos cloud-pos-2">60 <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>61 <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>62 <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>63 <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>64 </div>65 </body>66 </html>
必要なアニメーション CSS を別のファイルに配置しました:
1 .human-speak { 2 color: #fff; 3 float: left; 4 -webkit-animation-duration: 3s; 5 -webkit-animation-name: humanLineAppear; 6 } 7 8 .human-speak-delay-3 { 9 -webkit-animation-delay: 3s10 }11 12 .human-speak-delay-6 {13 -webkit-animation-delay: 6s14 }15 16 .human-speak-delay-9 {17 -webkit-animation-delay: 9s18 }19 20 .human-speak-delay-12 {21 -webkit-animation-delay: 12s22 }23 24 .human-speak-delay-15 {25 -webkit-animation-delay: 15s26 }27 28 @-webkit-keyframes humanLineAppear{29 from{30 top: -50px;31 color: #fff;32 }33 20%{34 top: -40px;35 color: #000;36 z-index:10;37 }38 80%{39 top: -40px;40 color: #000;41 z-index:10;42 }43 to{44 top: -50px;45 color: #fff;46 z-index:1;47 }48 }
ここで使用されている見慣れない CSS 属性またはキーワードには、次のものが含まれます: -webkit-animation-duration
2.-webkit-animation-delay
3.
4.@-webkit-keyframes
いつものように、まず MDN ドキュメントのアドレスに移動します: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations
アニメーションシステムのCSS（アニメーション属性とそのサブ属性）は、Chromeではブラウザプレフィックス（-webkit-）を追加する必要があります。アバンギャルドクロムではプレフィックスを追加する必要はないと思っていましたが、少し残念です。以下の説明ではプレフィックスを省略しています。
上記の 1 ～ 3 はすべて CSS 属性であり、CSS セレクターに追加するか、インライン属性としてタグの style 属性に直接追加できます。
4 番目のキーフレームは異なりますが、これについては以下で説明します。
1.animation-duration: アニメーション全体の実行に必要な時間を指定します。値は数値 + 単位の形式で指定します。単位は s (秒) または ms (ミリ秒) です。 ) デフォルト値は 0 です。
2.animation-delay: アニメーションの遅延実行時間、つまり、オブジェクトの読み込みの完了からアニメーションの実行の開始までの時間を指します。受け入れられる時間形式も時間であり、デフォルト値は 0 秒です。
3.animation-name: 使用されるアニメーション ルールの名前を指定するために使用されます。 デフォルト値はなしです。
4.@keyframes: これはキーワードであり、中国語訳は「キーフレーム」です。 ブラウザーの接頭辞を追加する場合は、先頭の「@」記号が必要です: @-webkit-keyframes yourKeyframesName (yourKeyframesName はキーフレームの名前) として記述します。
このキーワードはアニメーションルールを宣言するために使用され、特別なセレクターとみなすこともできます。 これは、js で関数を宣言するために使用される function キーワードに似ています。 構文は次のようになります: (-wekit- プレフィックスが例に追加されています)
1 @-webkit-keyframes humanLineAppear{ 2 from{ 3 top: -50px; 4 color: #fff; 5 } 6 20%{ 7 top: -40px; 8 color: #000; 9 z-index:10;10 }11 80%{12 top: -40px;13 color: #000;14 z-index:10;15 }16 to{17 top: -50px;18 color: #fff;19 z-index:1;20 }21 } キーフレームの構文は上記のとおりです。CSS 属性はセレクターのような方法でキーフレーム内に記述されます。ただし、「セレクター」名は id や className ではなくなり、from、to、またはパーセント値を受け入れるフレームの説明、または時間ノードの説明になります。
from は 0%、to は 100% に等しく、
0% はアニメーションの開始時間を表し、100% は終了時間を表します。 アニメーションの実行時間 (animation-duration 属性の値) が 10 秒の場合、50% は 5 秒目を表します。
の各パーセンテージ値は、アニメーション実行プロセスの時間ノードを表します。これを一時的に「フレーム」と呼び、フレームの CSS プロパティのコレクションを一時的に「フレーム セレクター」と呼びます。
フレーム セレクターは、アニメーションの実行中に特定のタイム ノードの CSS スタイルを設定するために使用されます。
異なるフレーム間で同じCSS属性名と異なる属性値が設定されている場合、
ブラウザはフレームの時系列に従い、異なる属性値を持つ最も隣接するフレームの組み合わせを見つけます。この CSS 属性 (複数のフレームの組み合わせが存在する場合があります) では、例のコードを例にとると、最上位の属性には次の組み合わせが見つかります:
1。 20% : 上部が -50px から -40px に変更されます
2. 80% --> to(100%): 上部が -40px から -50px に変更されます
上記のフレームの組み合わせには開始フレームと終了フレームがあります。これらにはすべて、少なくとも 1 つの CSS プロパティへの変更が含まれています。これを一時的に「フレーム間隔」と呼びます。
ブラウザがアニメーションを実行すると、CSS プロパティはフレーム間隔内で均一に変化します。つまり、開始フレームで指定されたプロパティ値が、終了フレームで指定されたプロパティ値まで均一な速度で増加または減少します。
---------------------------------------------- ------------------------------------ 私は突然の分かれ目です --------- ---------- -------------------------------------- ------- ----------
アニメーションを有効にするには、次の 3 つの条件を満たす必要があります:
1. アニメーション名は有効なキーフレームを指す必要があります。 @keyframes で宣言されています。これは、アニメーションに有効なアニメーション ルールがあることを意味します。
2. anime-duration は 0 秒より大きく、これはアニメーションの実行時間が 0 秒より長いことを意味します。
3. anime-iteration-count は 0 より大きく、アニメーションが少なくとも 1 回実行されることを意味します。 (このプロパティのデフォルト値は 1 なので、通常は設定する必要はありません)
さて、これで独自の簡単なアニメーションを作成できるはずです。
今日はここまでです、ご視聴ありがとうございました。 間違いがある場合は修正してください。