【css】cssで絵を描きたい(5)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

【css】cssで絵を描きたい(5)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

前回の【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

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 なので、通常は設定する必要はありません)

さて、これで独自の簡単なアニメーションを作成できるはずです。

今日はここまでです、ご視聴ありがとうございました。間違いがある場合は修正してください。

声明

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

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？Apr 05, 2025 pm 01:21 PM

WebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...

See all articles

ホットAIツール

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。