前言
今天分享一下我昨晚做的CSS3動畫效果——卡通場景汽車動畫。在接觸CSS3動畫之前，我之前實現一些簡單的動畫效果都是使用flash完成的。但是自從CSS3橫空出世，在移動端對CSS3動畫的運用越來越多。今天這個分享是PC端的案例，因為我做的是大場景來的，起因還是我無意間看到一張卡通圖片。于是我突發靈感，就趁熱打鐵使用CSS3動畫把它按照自己的想法實現了出來。接下來，就讓我們一起進入這個好玩的分享吧！
預覽
學習一個案例要有熱情，就應該先看一下案例的效果，所以，下圖為我錄的gif圖片，大家先看一下：
沒錯，上圖中每一個細節都是使用CSS3制作的，有沒有感覺像flash做的，哈哈！！！
此圖還是有掉幀或者卡頓現象，我這里提供在線查看地址：
http://www.jr93.top/cartoonAnimation/index.html
我已經對所有主流瀏覽器都做了兼容，但是有時候動畫太快會有模糊現象，這個我暫定認為是瀏覽器渲染問題。
正題
OK，接下來我將仔細分析一下這個案例的每一部分效果，但是可以看到其實場景有很多重復的小部分，比如窗戶，樹，山等。那么我就將選取其中一個作為此次講解的對象。另外，這個案例的工作量還是偏多的，所以我不會每一個步驟都講得很到位，主要還是把我的思路講解一下，給大家自己思考吸取。文章最后我會把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>
是不是夠多的，我都預感博文篇幅會很長，大家要保持耐心哦！還是需要仔細看一下html結構，因為接下來就都是CSS3干的活了：
這里先對最外層的容器做一下樣式：
.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;
}
接下來分步講解：
第一部分：天空，陸地
這部分就太簡單了，最外層容器已經設置了天空的背景色，所以只需要將陸地的部分繪制出來就行了：
.load{
position: relative;
top:290px;
background: rgb(27,121,160);
height: 160px;
}
第二部分：山脈，太陽，白云
首先是山脈的繪制,從上面的動圖可以看到，山脈都是一些不同夾角的三角形狀，那么其實我們制作的時候沒必要說非得畫出一模一樣的形狀出來，這里我都是繪制矩形，然后通過旋轉來完成的，因為陸地在山脈上面，所以就遮掉了一部分，就能達到我們看到的效果，最關鍵的一點是夾角的度數問題，可以看到有銳角和鈍角，這個我使用了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);
}
白云的話，這個就簡單了，一個div加上兩個偽元素就搞定，不多說，代碼如下：
.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);
}
第三部分：房子和樹
房子這一部分基本就是布局了，沒什么難度，但是也有很多技巧，可讓html結構更精簡。
房子我分成房頂，旗子，墻，二樓，一樓：
1.墻：這是房子的基本，就是一個矩形，這里不贅述。
2.房頂：這里就是一個小正方形加上邊框，旋轉45度，也簡單，不贅述。
3.旗子：難點其實在于旗面的五角星，比較煩，由于在場景中顯示比較小，所以五角星的繪制不需要精準到位，大概形狀像五角星就行，特別是旁邊四個小星星。
4.二樓：我這里給二樓設置了高度，然后設置它的上下邊框以實現一二樓的遮出層，窗戶的話，要巧用兩個偽元素，特別是窗戶上面的遮篷部分，四個白色豎條就是使用兩個偽元素的左右邊框實現的。
5.一樓：一樓基本跟二樓差不多，門的繪制道理都相通，不贅述。
樹的話，跟白云的繪制一樣簡單，不贅述。
效果圖如下：
由于這一塊的代碼量有點多，我就不放上來了，直接到github下載吧。
第四部分：兩輛汽車和石頭
汽車本身的繪制關鍵也是使用了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有所幫助！
