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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

前回の【css】に続き、cssで絵を描いていきます(5) この絵はかなり前から描いていたので、今回一気に更新を加えたので、この絵は完成しました。終わり。このアップデートには以下が含まれます:

1. 雲にアニメーションを追加します

2. 木を描きます

3. 木にリンゴを描き、リンゴに落ちるアニメーションを追加します

実際には TODO リストがありますが、このリストはそれなしで完成したと見なすことができるため、このリストは無期限に棚上げされる可能性があります:

1. 落ちる前にリンゴを左右に振ります

2. リンゴが落ちたら数回転がします

ポイント。

github: https://github.com/bee0060/Css-Paint

デモ: http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-6.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-house/sun.css" /> 7     <link rel="stylesheet" type="text/css" href="../../css/sun-house/house.css" /> 8     <link rel="stylesheet" type="text/css" href="../../css/sun-house/human.css" /> 9     <link rel="stylesheet" type="text/css" href="../../css/sun-house/cloud.css" />10     <link rel="stylesheet" type="text/css" href="../../css/sun-house/tree.css">11     <link rel="stylesheet" type="text/css" href="../../css/sun-house/apple.css">12 13     <link rel="stylesheet" type="text/css" href="../../css/sun-house/human-animate.css" />14     <link rel="stylesheet" type="text/css" href="../../css/sun-house/cloud-animate.css" />15 16     <script type="text/javascript" src="js/analysis.js"></script>17 </head>18 <body>19     <div class="sun">20         <div class="sun-body"></div>21         <div class="sun-shine-light sun-shine-light1"></div>22         <div class="sun-shine-light sun-shine-light2"></div>23         <div class="sun-shine-light sun-shine-light3"></div>24         <div class="sun-shine-light sun-shine-light4"></div>25         <div class="sun-shine-light sun-shine-light5"></div>26     </div>27 28     <div class="house-width house">29         <div class="house-width house-roof house-roof-left"></div>30         <div class="house-width house-roof house-roof-right"></div>31         <div class="house-width house-wall">            32             <div class="house-wall-door">                33                 <div class="house-wall-door-handle"></div>34             </div>35         </div>36     </div>37 38     <div class="human human-pos-1">39         <p class="lines human-speak">大家好，我叫小明。</p>40         <p class="lines human-speak human-speak-delay-3">我是一个程序员，最喜欢宅在家里LOL。</p>41         <p class="lines human-speak human-speak-delay-12">静静，我们交个朋友好吗？我的电话是13800123456。</p>42         <div class="human-head-normal"></div>43         <div class="human-body-normal"></div>44         <div class="human-arms-normal"></div>45         <div class="human-legs-normal"></div>46     </div>47 48     <div class="human human-pos-2">49         <p class="lines human-speak human-speak-delay-6">大家好，我叫静静</p>50         <p class="lines human-speak human-speak-delay-9">和大家看到的一样，我热爱舞蹈。</p>51         <p class="lines human-speak human-speak-delay-15">不要，程序员什么的最讨厌了！</p>52         <div class="human-head-normal"></div>53         <div class="human-body-normal"></div>54         <div class="human-arms-normal"></div>55         <div class="human-legs-1"></div>56     </div>57 58     <div class="cloud cloud-pos cloud-pos-1 cloud-animate-1">59         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>60         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>61         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>62         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>63     </div>64     <div class="cloud cloud-pos cloud-pos-2 cloud-animate-2">65         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>66         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>67         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>68         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>69     </div>70 71     <div class="tree">72         <div class="tree-top">73             <div class="tree-crowwn tree-crowwn-left"></div>74             <div class="tree-crowwn tree-crowwn-top"></div>75             <div class="tree-crowwn tree-crowwn-right"></div>76             <div class="tree-crowwn tree-crowwn-bottom"></div>77         </div>78         <div class="tree-middle">79             <div class="tree-trunk"></div>80         </div>81         <div class="tree-bottom">82             <div class="tree-root tree-root-left"></div>83             <div class="tree-root tree-root-middle"></div>84             <div class="tree-root tree-root-right"></div>85         </div>86     </div>87     <!-- TODO:     1.苹果左右震动一下再下跌88             2.苹果跌下来后向左滚动几圈 -->89     <div class="apple">90         <div class="apple-body apple-left"></div>91         <div class="apple-body apple-right"></div>92         <div class="apple-stalk"></div>93     </div>94 </body>95 </html>

追加された CSS は次のとおりです:

 1 .cloud-animate-1 { 2     -webkit-animation-duration: 20s; 3       -webkit-animation-name: cloudMove-1; 4       -webkit-animation-iteration-count: infinite; 5       -webkit-animation-direction: alternate; 6 } 7  8 .cloud-animate-2 { 9     -webkit-animation-duration: 20s;10       -webkit-animation-name: cloudMove-2;11       -webkit-animation-iteration-count: infinite;12       -webkit-animation-direction: alternate;13 }14 15 @-webkit-keyframes cloudMove-1 {16     25% {17         top : 10px;18     }19 20     50% {21         top: 50px;22     }23 24     75% {25         top: 20px; 26     }27 28     to {     29         left: 10%     30     }31 }32 33 @-webkit-keyframes cloudMove-2 {34     25% {35         top : 30px;36     }37 38     50% {39         top: 80px;40     }41 42     75% {43         top: 10px; 44     }45 46     to { 47         left: 85%         48     }49 }

 1 .tree{ 2     bottom: 10px; 3     height: 700px; 4     position: absolute; 5     right: 120px; 6     width: 500px; 7 } 8  9 .tree-crowwn {10     background-color: green;11     border-radius: 50%;12     position: absolute;13     z-index: 2;14 }15 16 .tree-crowwn-left {17     height: 250px;18     top: 150px;19     width: 250px;20 }21 22 .tree-crowwn-top {23     height: 320px;24     left: 100px;25     width: 320px;26 }27 28 .tree-crowwn-right {29     height: 250px;30     left: 250px;31     top: 150px;32     width: 250px;33 }34 35 .tree-crowwn-bottom {36     height: 120px;37     left: 150px;38     top: 270px;39     width: 200px;40 }41 42 .tree-trunk {43     background-color: #5d2323;44     height: 280px;45     left: 170px;46     position: absolute;47     top: 350px;48     width: 180px;49     z-index: 1;50 }51 52 .tree-bottom {53     position: absolute;54     top: 630px;55 }56 57 .tree-root {58     background-color: #503333;    59     height: 30px;60     position: absolute;61     width: 20px;62 }63 64 .tree-root-left {65     left: 170px;66     -webkit-transform: matrix(1, 0, -0.5, 1, 0, 0);67     -webkit-transform-origin: right top;68 }69 70 .tree-root-middle {71     left: 250px;72     -webkit-transform: matrix(1, 0, -0.1, 1, 0, 0);73 }74 75 .tree-root-right {76     left: 330px;77     -webkit-transform: matrix(1, 0, 0.5, 1, 0, 0);78     -webkit-transform-origin: left top;79 }

 1 .apple { 2     bottom: 360px; 3     height: 60px;     4     position: absolute; 5     right: 480px; 6     width: 60px; 7     z-index: 3; 8  9     -webkit-animation-duration: 1.5s;10     -webkit-animation-delay: 18s;11       -webkit-animation-name: appleDrop;12       -webkit-animation-timing-function: cubic-bezier(0.5, 0.1, 0.85, 0.3);13       -webkit-animation-fill-mode: forwards;14 }15 16 .apple-body {17     background-color: #ff3300;    18     border-radius: 75% 75% 90% 90%;19     height: 50px;20     position: absolute;21     width: 37px;22     z-index: 3;23 }24 25 .apple-left {26 27 }28 29 .apple-right {30     right:2px;31 }32 33 .apple-stalk {34     border: none;35     border-radius: 100%;36     border-right: 3px solid #000;37     height:20px;38     left: 8px;39     position: absolute;40     top:-10px;41     width:20px;42     z-index: 2;43 }44 45 @-webkit-keyframes appleDrop{46     from{47          48     }49     20%{50          51     }52     80%{53          54     }55     to{56         bottom: 35px;57     }58 }

ここで使用されている見慣れない CSS 属性include (関連する MDN ドキュメントのリンクが直接添付されています):

1.animation-iteration-count - アニメーションの実行数を表し、デフォルト値は 1 です。値には、負でない整数または無限キーワードを指定できます。無限とは、無限回実行することを意味します。

2. アニメーション方向 - キーフレームの実行方向を表します。デフォルト値は通常です。オプションの値には以下が含まれます:

normal: 順方向実行、順序は (0%) から (100%) までです。

reverse: 逆実行。順序は to(100%) から from(0%) です。

alternate: 最初に順方向に実行し、次に逆方向に実行します。これは、奇数回の場合は順方向に実行し、偶数回の場合は逆方向に実行すると理解することもできます。

alternate-reverse: 代替とは逆に、最初に逆方向に実行し、次に順方向に実行します。

3. アニメーションタイミング関数 - MDN ドキュメントには、このプロパティはサイクル内のアニメーション実行のリズムを定義するために使用されると記載されています。私の理解では、アニメーションのフレーム間のプロパティの変化率を定義するために使用されます。。デフォルト値は easy (最初に加速してから減速する) です。

通常は略語で指定できます。よく使われる略語には、ease (ease,ease-in,ease-out,ease-in-out) や、均一速度 (linear) などがあります。キーワードに加えて、少し特殊な設定があります:

steps: 構文はsteps(N, target)、Nは正の整数、targetはターゲットです。開始または終了を設定できます(他の値は設定されていません)。試してみましたが、前述の文書には記載されていません）。これは不均一な速度で N 回スタートに到達することを意味します。以下に例を示します

cubic-bezier: ベジェ曲線、構文は cubic-bezier(x1, y1, x2, y2) で、4 つのパラメーターは 10 進数であり、負の数にすることができます。 x 座標と y 座標を通じて 2 つの点が決定され、これら 2 つの点を通じて変化曲線が記述されます。まだ詳しく勉強していないので、ここでは触れません。前のリンクは百度百科からのものです。興味があればご覧ください。今日、アニメーションでベジェ曲線の実際の効果を体験できる良い Web サイトを見つけました: http://cubic-bezier.com/#.17,.67,.83,.67。アニメーションを作成するときにもこの Web サイトを使用できるため、数値の調整に長い時間を費やす必要はありません。

この属性について詳しく知りたい場合は、より詳細な記事を見つけることをお勧めします。ここではほんの味を示します:)

4. ターゲットスタイルを宣言するために使用されます。アニメーションの実行が完了します。デフォルト値は none です。この値は、アニメーションの方向とアニメーションの反復回数の値の影響を受けます。 anime-iteration-count の値が無限でアニメーションが終了しない場合、この属性は無効になります。

オプションの値は次のとおりです:

none - アニメーションの終了後、アニメーションのキーフレームによって設定されたスタイルは使用されません。

forward - アニメーションの最後のフレームのスタイルを採用します

backward - アニメーションの最初のフレームのスタイルを採用します

both - アニメーションの最初と最後のフレームのスタイルを同時に採用します。ただし、値が矛盾するプロパティがどのように処理されるかはわかりません。

キーフレームの設定において、必ずしも最初のフレームが(0%)から、最後のフレームが(100%)になるとは限りません。具体的な状況は以下のとおりです。MDNから翻訳したものです。 :

アニメーションの方向アニメーションの反復数最初のフレーム最後のフレーム 1 00% または 0% またはから代替偶数0% または〜から代替奇数0% または〜から1 00% または代替-リバース偶数100% または to100% または to交互反転奇数100% または to0% またはから

normal	任意の値	0% または from	100% または to
reverse	任意の値

PS: 上記の 4 つのプロパティは、animation-name と同様に、カンマで区切られた複数の値に設定でき、各値はアニメーション内の同じ位置のアニメーションルールを記述するために使用されます。 -名前。アニメーション名、キーフレームの簡単な情報は[css]で見ることができます。 cssで絵を描きたい (5)

さて、今日はここまでで、このサンハウスの絵は終わりました。後で何を描くか見てみましょう。読んでくれてありがとう。

声明

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

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

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

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