漫画のシーンの車のアニメーション効果を作成するための純粋な CSS3_html/css_WEB-ITnose

はじめに今日は、昨夜作成した CSS3 アニメーション効果、漫画のシーンの車のアニメーションを共有します。 CSS3 アニメーションに触れる前は、Flash を使用して簡単なアニメーション効果を実現していました。しかし、CSS3 の登場以来、CSS3 アニメーションはモバイル端末でますます使用されるようになりました。今日の共有はPCケースです。私がやったのは大規模なシーンであり、その理由は偶然漫画の絵を見たからです。そこで、突然ひらめき、鉄が熱いうちにCSS3アニメーションを使って自分のアイデア通りに実現してみました。次に、この楽しい共有を始めましょう。

プレビュー 症例を熱心に学習したい場合は、まず症例の効果を確認する必要があります。 したがって、下の写真は私が記録したGIF画像です。まず最初に:

はい、上の画像はすべて CSS3 を使用して作成されています。Flash で作成されているように感じますか (笑)。 ！ ！この画像にはまだフレームのドロップや遅れがあります。ここでオンライン表示アドレスを提供します: http://www.jr93.top/cartoonAnimation/index.html すべての主要なブラウザと互換性を持たせましたが、アニメーションが不安定になることがあります。すぐにぼやけてしまいますが、これはブラウザのレンダリングの問題だと暫定的に考えています。

要点OK、次にこのケースの各パーツの効果を注意深く分析しますが、実際にはシーンには窓や木などの小さなパーツが多数繰り返されていることがわかります。 、山など。そこで、そのうちの 1 つを今回の説明の対象として選びます。さらに、このケースの作業量はまだ多すぎるため、すべてのステップを詳細に説明することはしません。主なことは、誰もが自分で考えて学ぶことができるように私のアイデアを説明することです。記事の最後に、このケースの利用を容易にするための github アドレスをお知らせします。早速本題に入りましょう！まず、HTML 構造を構築する必要があります。そのためには、シーンの独自の分析に基づいてそれを知る必要があります。そうすれば、HTML 構造が自然に構築されます。この場合の HTML コードは次のとおりです。

<div class="container">    <!-- 山 -->    <div class="mountain">        <div class="part_one"></div>        <div class="part_two"></div>        <div class="part_three"></div>        <div class="part_four"></div>    </div>    <!-- 道路 -->    <div class="load"></div>    <!-- 石头 -->    <div class="stone"></div>    <!-- 太阳 -->    <div class="sun">        <div class="sunshine"></div>        <div class="center_sun"></div>    </div>    <!-- 云朵 -->    <div class="cloud"></div>    <!-- 房子 -->    <div class="house">        <!-- 旗子部分 -->        <div class="flag_whole">            <!-- 旗杆 -->            <div class="pole"></div>            <!-- 旗面 -->            <div class="flag">                <span class="star"></span>                <span class="littlestar star1"></span>                <span class="littlestar star2"></span>                <span class="littlestar star3"></span>                <span class="littlestar star4"></span>            </div>        </div>        <!-- 墙面 -->        <div class="wall"></div>        <!-- 房顶 -->        <div class="roof"></div>        <!-- 二楼 -->        <div class="secondFloor">            <!-- 窗户 -->            <div class="window w1">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>            <div class="window w2">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>            <div class="window w3">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>            <div class="window w4">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>        </div>        <div class="firstFloor">            <!-- 窗户 -->            <div class="window f-w1">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>            <div class="window f-w2">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>            <!-- 门 -->            <div class="door">                <!-- 门梁 -->                <div class="door_over"></div>                <!-- 门主体 -->                <div class="door_body">                    <div class="leftDoor"></div>                    <div class="rightDoor"></div>                </div>            </div>            <div class="window f-w3">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>        </div>    </div>    <!-- 树 -->    <div class="trees">        <div class="leftTree"><span></span></div>        <div class="leftTree l2"><span></span></div>        <div class="rightTree"><span></span></div>        <div class="rightTree r2"><span></span></div>    </div>    <!-- 第一辆汽车 -->    <div class="car">        <div class="car_body">            <div class="car_top1"></div>            <div class="car_top2"></div>            <div class="car_win1"></div>            <div class="car_win2"></div>            <div class="car_bottom1"></div>            <div class="car_bottom2"></div>        </div>        <div class="frontWheel"></div>        <div class="endWheel"></div>        <div class="exhaust"></div>    </div>    <!-- 第二辆车（浅绿色） -->    <div class="car2">        <div class="car2_top"></div>        <div class="car2_win"></div>        <div class="car2_bottom">            <div class="car2_light1"></div>            <div class="car2_light2"></div>            <div class="car2_light3"></div>        </div>        <div class="car2_frontWheel"></div>        <div class="car2_endWheel"></div>    </div></div>

十分ですか? ブログ投稿が非常に長くなりそうな予感がするので、しばらくお待ちください。次のステップはすべて CSS3 によって行われるため、HTML 構造を詳しく見る必要があります。まず、最も外側のコンテナのスタイルを設定しましょう:

.container{    width: 800px;    height: 450px;    margin: 20px auto;    position: relative;    background: rgb(187,235,255);    border:1px solid #ddd;    box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1);    overflow: hidden;}

次に、ステップごとに説明します。 : パート 1: 空、陸 この部分は単純すぎるため、一番外側のコンテナですでに空の背景色が設定されているため、陸の部分のみを描画する必要があります:

.load{    position: relative;    top:290px;    background: rgb(27,121,160);    height: 160px;}

見てください。効果:

パート 2: 山、太陽、白い雲 最初に行うことは山を描くことです。上のアニメーションからわかるように、山です。角度を含む三角形の形状はすべて異なります。実際に作成するときは、長方形を描いてからそれを回転させて完成させる必要はありません。最も重要な点は角度です。このために、skew() メソッドを使用しました。最初の山脈のコードは次のとおりです。

.mountain .part_one{    width:300px;    height: 300px;    background: rgb(106,207,255);    position: absolute;    -webkit-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);    -moz-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);    -o-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);    -ms-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);    transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);}

Baiyun の場合、これは簡単です。 1 つの div と 2 つの疑似要素を追加するだけです。コードは次のとおりです。

.cloud{    display: inline-block;    width: 40px;    height: 40px;    border-radius: 50%;    background: #fff;    position: absolute;    left:-60px;    top:20px;}.cloud:before{    content: '';    display: inline-block;    width: 40px;    height: 16px;    border-radius: 16px 0 0 16px;    background: #fff;    position: absolute;    bottom:0;    left:-12px;}.cloud:after{    content: '';    display: inline-block;    width: 40px;    height: 28px;    border-radius: 0 28px 28px 0;    background: #fff;    position: absolute;    bottom:0;    right:-16px;}

ここでは、太陽の絞りを使用します。晴天を鮮やかに映し出すキュートなアプローチ。具体的には、グラデーションの背景を使用し、影を追加してアニメーション効果を実装しました。コードは次のとおりです。

.sun{    position: relative;}.sun .center_sun{    width:40px;    height:40px;    background: rgb(255,255,123);    border-radius: 50%;    position: absolute;    top:-120px;    right:160px;}.sun .sunshine{    width:60px;    height:60px;    background: #f67e28; /* Old browsers */    background: -moz-radial-gradient(center, ellipse cover, #f67e28 0%, #f67e28 50%, #f4bf9a 60%, #f4bf9a 100%); /* FF3.6+ */    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f67e28), color-stop(50%,#f67e28), color-stop(60%,#f4bf9a), color-stop(100%,#f4bf9a)); /* Chrome,Safari4+ */    background: -webkit-radial-gradient(center, ellipse cover, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* Chrome10+,Safari5.1+ */    background: -o-radial-gradient(center, ellipse cover, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* Opera 12+ */    background: -ms-radial-gradient(center, ellipse cover, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* IE10+ */    background: radial-gradient(ellipse at center, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f67e28', endColorstr='#f4bf9a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */    position: absolute;    top:-130px;    right:150px;    border-radius:50%;    box-shadow: 0 0 2px 4px rgba(246,126,40,0.3);}

レンダリングは次のとおりです。

パート 3: ハウスとツリーハウス このパートは基本的にレイアウトです。これは難しいことではありませんが、HTML 構造をより合理化するためのテクニックもたくさんあります。家を屋根、旗、壁、2 階、1 階に分けました。 1. 壁: これは家の基本的な部分であり、ここでは詳しく説明しません。 2. 屋根: これは枠のある小さな正方形を 45 度回転させたもので、単純なので詳細は説明しません。 3. 旗: 問題は実際には旗の五芒星ですが、シーン内では表示が比較的小さいため、五芒星の描画は正確である必要はありません。おおよそ五芒星の形をしており、特にその隣にある 4 つの小さな星がそうです。 4. 2 階: ここで 2 階の高さを設定し、次にその上部と下部の境界線を設定して、1 階と 2 階の遮蔽層を実現します。窓については、2 つの疑似要素、特に上の日よけを上手に使用する必要があります。ウィンドウ。4 つの白い垂直バーは、2 つの疑似要素の左右の境界線を使用して実装されます。 5. 1 階: 1 階も 2 階と基本的に同じです。ドアを描く原理は同じなので、詳細は説明しません。樹木については、白い雲を描くだけなので詳細は割愛します。レンダリングは次のとおりです。

この部分には多くのコードがあるため、アップロードしません。github にアクセスしてダウンロードしてください。パート 4: 2 台の車と石の車自体を描画する鍵となるのは、skew() メソッドを使用することです。その他はレイアウトの問題なので、コードを直接指定します。

.stone{    width:30px;    height: 16px;    background: #333;    border-radius: 16px 16px 5px 5px;    position: absolute;    top:410px;    left:550px;    box-shadow: 1px 1px 1px #333;}.car{    position: absolute;    left:900px;    top:340px;    z-index:12;}.car .car_body{    position: absolute;}.car .car_top1,.car .car_top2{    width:45px;    height: 35px;    border-top-left-radius:10px;    border-top-right-radius:10px;    background: rgb(246,126,40);    position: absolute;    left:0;    top:0;    -webkit-transform:skew(24deg);    -moz-transform:skew(24deg);    -o-transform:skew(24deg);    -ms-transform:skew(24deg);    transform:skew(24deg);}.car .car_top1{    left:-29px;    top:0px;    -webkit-transform:skew(-24deg);    -moz-transform:skew(-24deg);    -o-transform:skew(-24deg);    -ms-transform:skew(-24deg);    transform:skew(-24deg);}.car .car_win1,.car .car_win2{    width:24px;    height:24px;    background: #fff;    border-top-left-radius:10px;    position: absolute;    left:13px;    top:6px;    -webkit-transform:rotate(80deg) skew(-10deg);    -moz-transform:rotate(80deg) skew(-10deg);    -o-transform:rotate(80deg) skew(-10deg);    -ms-transform:rotate(80deg) skew(-10deg);    transform:rotate(80deg) skew(-10deg);}.car .car_win1{    left:-22px;    -webkit-transform:rotate(0deg) skew(-10deg);    -moz-transform:rotate(0deg) skew(-10deg);    -o-transform:rotate(0deg) skew(-10deg);    -ms-transform:rotate(0deg) skew(-10deg);    transform:rotate(0deg) skew(-10deg);}.car .car_win1:after,.car .car_win2:after{    content:'';    display:inline-block;    width:10px;    height: 24px;    background: #fff;    position: absolute;    left:16px;    top:0;    -webkit-transform:skew(10deg);    -moz-transform:skew(10deg);    -o-transform:skew(10deg);    -ms-transform:skew(10deg);    transform:skew(10deg);}.car .car_win2:after{    top:9px;    left:7px;    -webkit-transform:rotate(-90deg) skew(-10deg);    -moz-transform:rotate(-90deg) skew(-10deg);    -o-transform:rotate(-90deg) skew(-10deg);    -ms-transform:rotate(-90deg) skew(-10deg);    transform:rotate(-90deg) skew(-10deg);}.car .car_bottom1,.car .car_bottom2{    width:74px;    height:33px;    background: rgb(246,126,40);    border-top-left-radius: 24px 20px;    border-bottom-left-radius: 3px;    border-bottom:8px solid rgb(186,188,187);    position: absolute;    top:34px;    left:-66px;    -webkit-transform:skew(-4deg);    -moz-transform:skew(-4deg);    -o-transform:skew(-4deg);    -ms-transform:skew(-4deg);    transform:skew(-4deg);}.car .car_bottom2:before{    content: 'JR';    font-size:12px;    font-weight: bolder;    color:#fff;    position: absolute;    top:5px;left:45px;}.car .car_bottom1:after{    content: '';    display: inline-block;    background: rgb(247,244,111);    width:10px;    height: 16px;    border-radius: 6px/8px;    position: absolute;    top:11px;    left:6px;}.car .car_bottom2{    height: 36px;    border-top-left-radius: 0;    border-top-right-radius: 13px 17px;    border-bottom-right-radius: 3px;    left:0px;    top:31px;    -webkit-transform:skew(8deg);    -moz-transform:skew(8deg);    -o-transform:skew(8deg);    -ms-transform:skew(8deg);    transform:skew(8deg);}.car .frontWheel,.car .endWheel{    width:34px;    height:34px;    border-radius: 50%;    background:#333;    position: absolute;    top:55px;    left:-40px;}.car .endWheel{    left:20px;}.car .frontWheel:after,.car .endWheel:after{    content: '';    display: inline-block;    width:14px;    height: 14px;    background: #fff;    border-radius: 50%;    position: absolute;    top:50%;    left:50%;    margin-top: -7px;    margin-left: -7px;}.car .exhaust{    width:18px;    height:18px;    background: rgba(0,0,0,0.3);    border-radius: 8px 8px 8px 1px;    position: absolute;    left:80px;    top:55px;    opacity: 0;}.car2{    position: absolute;    left:900px;    top:250px;    z-index:10;}.car2 .car2_top{    width:55px;    height: 40px;    border-top-left-radius:15px;    border-top-right-radius:10px;    background: rgb(117,191,135);    position: absolute;    left:-29px;    top:0px;    -webkit-transform:skew(-20deg);    -moz-transform:skew(-20deg);    -o-transform:skew(-20deg);    -ms-transform:skew(-20deg);    transform:skew(-20deg);}.car2_top:after{    content: '';    display: inline-block;    width:12px;    height: 40px;    background: rgb(117,191,135);    -webkit-transform:skew(20deg);    -moz-transform:skew(20deg);    -o-transform:skew(20deg);    -ms-transform:skew(20deg);    transform:skew(20deg);    position: absolute;    left:48px;}.car2 .car2_win{    width:42px;    height:30px;    background: #fff;    border-top-left-radius:10px;    position: absolute;    top:5px;    left:-22px;    -webkit-transform:rotate(0deg) skew(-20deg);    -moz-transform:rotate(0deg) skew(-20deg);    -o-transform:rotate(0deg) skew(-20deg);    -ms-transform:rotate(0deg) skew(-20deg);    transform:rotate(0deg) skew(-20deg);}.car2_win:after{    content: '';    display: inline-block;    width:12px;    height: 30px;    background: #fff;    -webkit-transform:skew(20deg);    -moz-transform:skew(20deg);    -o-transform:skew(20deg);    -ms-transform:skew(20deg);    transform:skew(20deg);    position: absolute;    left:36px;}.car2 .car2_bottom{    width: 180px;    height: 56px;    background: rgb(117,191,135);    border-top-left-radius: 50px;    border-bottom-left-radius: 50px;    position: absolute;    top:39px;    left:-60px;}.car2 .car2_bottom .car2_light1{    width:14px;    height: 20px;    background: rgb(229,230,88);    border-radius: 20px/30px;    position: absolute;    left:-3px;    top:18px;}.car2 .car2_bottom .car2_light2,.car2 .car2_bottom .car2_light3{    width:12px;    height: 12px;    background: rgb(229,230,88);    border-radius: 50%;    position: absolute;    right:-8px;    top:12px;}.car2 .car2_bottom .car2_light3{    top:36px;}.car2 .car2_frontWheel,.car2 .car2_endWheel{    width:40px;    height:40px;    background: #333;    border-radius: 50%;    position: absolute;    top:75px;    left:-30px;}.car2 .car2_endWheel{    left:60px;}.car2 .car2_frontWheel:after,.car2 .car2_endWheel:after{    content: '';    display: inline-block;    width:20px;    height: 20px;    background: rgb(216,107,82);    border-radius: 50%;    position: absolute;    top:50%;    left:50%;    margin-left: -10px;    margin-top: -10px;}

主要还是讲解一下动画效果实现的原理：1.浅绿色货车就没什么好说的了，直接改变left值，一直开过去就行了。2.橙色汽车动画步骤分析：首先汽车比较快地从远处往餐厅方向开过来，不小心磕碰到路面上的石头，由于汽车速度有点快，惯性大，所以汽车后半身往上翘，同时汽车往前推行了一点点，当汽车掉下来的时候，由于重力的原因，车身会有缓动的效果，表现为掉落时车身向下压，然后回弹，此车司机撞懵了一下，然后重启汽车，开始汽车前行有点故障，然后过一小会就恢复正常，最后就开走了。大致思路就是这样，具体实现肯定是慢慢琢磨的过程了，要让动画效果合乎常理而又不失趣味性，才是真正考验的地方。

以上所有步骤完成了的话，那么久实现了最初预览时的效果了。如果想学习整个案例的话，可以前往我提供的github地址下载：https://github.com/JR93/cartoonAnimation

希望对大家学习CSS3有所帮助！