ホームページ >ウェブフロントエンド >htmlチュートリアル >【css】cssで絵を描きたい(6)_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル: 2016-06-24 11:32:341328ブラウズ

前回の【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 までご連絡ください。

前の記事：margins_html/css_WEB-ITnose との位置の重複を修正しました次の記事：margins_html/css_WEB-ITnose との位置の重複を修正しました

続きを見る

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

関連記事