CSS实现卡通小汽车加场景动画效果

BooBoo
287 阅读15分钟

我正在参加 码上掘金体验活动，详情：show出你的创意代码块。

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

介绍

哈喽，大家好。每个人童年都幻想着有一堆卡通小车玩具。既然长大了童年也一去不复返，那我们就用代码来回味一下精彩的童年吧。今天来给大家介绍一下纯css实现带有房子、山、树木、蓝天、白云的生活场景的卡通小汽车,本文涉及的知识点,html+css,css3动画效果,渐变，动画.下面来给大家详细介绍一下整个制作的过程。

代码块

code.juejin.cn/pen/7090431…

代码实现如下，由于场景比较多每个物体的结构介绍在代码中已经详细注释了。请看html代码：

<h1>CSS3卡通场景汽车动画</h1>
	<!-- 场景容器 -->
	<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修饰各个实际物体的颜色和形状以及动画效果，主要用到keyframes动画效果，还有旋转特效，animation动画效果。请看css代码：

h1{
	text-align: center;
	color:#666;
}
.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;
}
.mountain{
	position: relative;
}
.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);
}
.mountain .part_two{
	width:200px;
	height: 200px;
	background: rgb(105,198,242);
	position: absolute;
	left:330px;
	-webkit-transform:rotate(30deg) skew(-25deg) translate3d(270px,90px,0);
	-moz-transform:rotate(30deg) skew(-25deg) translate3d(270px,90px,0);
	-o-transform:rotate(30deg) skew(-25deg) translate3d(270px,90px,0);
	-ms-transform:rotate(30deg) skew(-25deg) translate3d(270px,90px,0);
	transform:rotate(30deg) skew(-25deg) translate3d(270px,90px,0);
}
.mountain .part_three{
	width:300px;
	height: 300px;
	background: rgb(106,207,255);
	position: absolute;
	left:330px;
	-webkit-transform:rotate(45deg) skew(10deg) translate3d(120px,150px,0);
	-moz-transform:rotate(45deg) skew(10deg) translate3d(120px,150px,0);
	-o-transform:rotate(45deg) skew(10deg) translate3d(120px,150px,0);
	-ms-transform:rotate(45deg) skew(10deg) translate3d(120px,150px,0);
	transform:rotate(45deg) skew(10deg) translate3d(120px,150px,0);
}
.mountain .part_four{
	width:200px;
	height: 200px;
	background: rgb(106,207,255);
	position: absolute;
	left:430px;
	-webkit-transform:rotate(34deg) skew(-40deg) translate3d(300px,95px,0);
	-moz-transform:rotate(34deg) skew(-40deg) translate3d(300px,95px,0);
	-o-transform:rotate(34deg) skew(-40deg) translate3d(300px,95px,0);
	-ms-transform:rotate(34deg) skew(-40deg) translate3d(300px,95px,0);
	transform:rotate(34deg) skew(-40deg) translate3d(300px,95px,0);
}
.load{
	position: relative;
	top:290px;
	background: rgb(27,121,160);
	height: 160px;
}
.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);
	-webkit-animation:sun_shining 3s ease infinite alternate;
	-moz-animation:sun_shining 3s ease infinite alternate;
	-o-animation:sun_shining 3s ease infinite alternate;
	-ms-animation:sun_shining 3s ease infinite alternate;
	animation:sun_shining 3s ease infinite alternate;
}
@-webkit-keyframes sun_shining{
	0%{
		-webkit-transform:scale(0.8);
	}
	100%{
		-webkit-transform:scale(1);
	}
}
@-moz-keyframes sun_shining{
	0%{
		-moz-transform:scale(0.8);
	}
	100%{
		-moz-transform:scale(1);
	}
}
@-o-keyframes sun_shining{
	0%{
		-o-transform:scale(0.8);
	}
	100%{
		-o-transform:scale(1);
	}
}
@-ms-keyframes sun_shining{
	0%{
		-ms-transform:scale(0.8);
	}
	100%{
		-ms-transform:scale(1);
	}
}
@keyframes sun_shining{
	0%{
		transform:scale(0.8);
	}
	100%{
		transform:scale(1);
	}
}
.house{
	position: relative;
}
.house .flag_whole{
	position: absolute;
}
.flag_whole .pole{
	height: 60px;
	border:2px solid rgb(197,151,63);
	position: absolute;
	top:-125px;
	left:297px;
}
.pole:after{
	content: '';
	display: inline-block;
	width:10px;
	height: 10px;
	background: rgb(231,183,91);
	border-radius: 50%;
	position: absolute;
	top:-5px;
	left:-5px;
}
.flag_whole .flag{
	width:45px;
	height: 28px;
	background: rgb(215,33,33);
	position: absolute;
	top:-118px;
	left:301px;
	-webkit-animation:flag_shake 0.6s ease-in-out infinite alternate;
	-moz-animation:flag_shake 0.6s ease-in-out infinite alternate;
	-o-animation:flag_shake 0.6s ease-in-out infinite alternate;
	-ms-animation:flag_shake 0.6s ease-in-out infinite alternate;
	animation:flag_shake 0.6s ease-in-out infinite alternate;
}
@-webkit-keyframes flag_shake{
	0%{

	}
	100%{
		-webkit-transform:skewY(5deg) translateY(3px);
	}
}
@-moz-keyframes flag_shake{
	0%{

	}
	100%{
		-moz-transform:skewY(5deg) translateY(3px);
	}
}
@-o-keyframes flag_shake{
	0%{

	}
	100%{
		-o-transform:skewY(5deg) translateY(3px);
	}
}
@-ms-keyframes flag_shake{
	0%{

	}
	100%{
		-ms-transform:skewY(5deg) translateY(3px);
	}
}
@keyframes flag_shake{
	0%{

	}
	100%{
		transform:skewY(5deg) translateY(3px);
	}
}
/*大星星*/
.star,.star:before,.star:after{
	display: inline-block;
	width: 0;
	height: 0;
	border-top:8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 5px solid rgb(255,202,0);
	position: absolute;
	left:7.5px;
	top:6px;
	-webkit-transform: rotate(18deg);
	-moz-transform: rotate(18deg);
	-o-transform: rotate(18deg);
	-ms-transform: rotate(18deg);
	transform: rotate(18deg);
}
.star:before{
	content: '';
	top:-8.2px;
	left:-4.4px;
	-webkit-transform: rotate(72deg);
	-moz-transform: rotate(72deg);
	-o-transform: rotate(72deg);
	-ms-transform: rotate(72deg);
	transform: rotate(72deg);
}
.star:after{
	content: '';
	top:-7.7px;
	left:-5.3px;
	-webkit-transform: rotate(147deg);
	-moz-transform: rotate(147deg);
	-o-transform: rotate(147deg);
	-ms-transform: rotate(147deg);
	transform: rotate(147deg);
}
/*小星星*/
.littlestar,.littlestar:before,.littlestar:after{
	display: inline-block;
	width: 0;
	height: 0;
	border-top:3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 2px solid rgb(255,202,0);
	position: absolute;
	left:18.5px;
	top:5px;
	-webkit-transform: rotate(18deg);
	-moz-transform: rotate(18deg);
	-o-transform: rotate(18deg);
	-ms-transform: rotate(18deg);
	transform: rotate(18deg);
}
.littlestar:before{
	content: '';
	top:-3.5px;
	left:-2px;
	-webkit-transform: rotate(72deg);
	-moz-transform: rotate(72deg);
	-o-transform: rotate(72deg);
	-ms-transform: rotate(72deg);
	transform: rotate(72deg);
}
.littlestar:after{
	content: '';
	top:-3.2px;
	left:-2px;
	-webkit-transform: rotate(147deg);
	-moz-transform: rotate(147deg);
	-o-transform: rotate(147deg);
	-ms-transform: rotate(147deg);
	transform: rotate(147deg);
}
.house .wall{
	width:260px;
	height:200px;
	background: rgb(112,151,194);
	position: absolute;
	left:140px;
	top:-38px;
	z-index: 2;
}
.star1{
	left:18px;
	top:2px;
}
.star2{
	left:24px;
	top:7px;
}
.star3{
	left:24px;
	top:15px;
}
.star4{
	left:18px;
	top:21px;
}
.house .roof{
	width:45px;
	height:45px;
	background: rgb(120,145,199);
	border:5px solid rgb(157,189,224);
	border-radius: 3px;
	position: absolute;
	top:-67px;
	left:270px;
	z-index:1;
	-webkit-transform:rotate(36deg) skew(-15deg);
	-moz-transform:rotate(36deg) skew(-15deg);
	-o-transform:rotate(36deg) skew(-15deg);
	-ms-transform:rotate(36deg) skew(-15deg);
	transform:rotate(36deg) skew(-15deg);
}
.house .secondFloor{
	width:280px;
	height: 94px;
	border-top:8px solid rgb(157,189,224);
	border-bottom:8px solid rgb(157,189,224);
	position: absolute;
	left:130px;
	top:-42px;
	z-index:3;
}
.house .firstFloor{
	width:280px;
	height: 94px;
	position: absolute;
	left:130px;
	top:68px;
	z-index:3;
}
.house .window{
	position: absolute;
}
.house .window .window_tent{
	width:48px;
	height:20px;
	background: rgb(192,0,27);
	position: absolute;
	top:0;
	left:-2px;
	z-index:2;
}
.window_tent:before,.window_tent:after{
	content: '';
	display: inline-block;
	width:7.5px;
	height: 20px;
	border-left:6.5px solid #fff;
	border-right:6.5px solid #fff;
	position: absolute;
	top:0;
	left:0;
}
.window_tent:after{
	left:28.5px;
}
.house .window .window_body{
	width:36px;
	height:50px;
	background: rgb(49,89,148);
	border:4px solid rgb(169,196,222);
	border-radius: 3px;
	position: absolute;
}
.window_body:before{
	content: '';
	display: inline-block;
	width:36px;
	border:2px solid rgba(169,196,222,0.5);
	position: absolute;
	top:38px;
}
.window_body:after{
	content: '';
	display: inline-block;
	height:50px;
	border:2px solid rgba(169,196,222,0.5);
	position: absolute;
	left:50%;
	margin-left:-2px;
}
.w1{
	top:20px;
	left:24px;
}
.w2{
	top:20px;
	left:86px;
}
.w3{
	top:20px;
	left:147.5px;
}
.w4{
	top:20px;
	left:210px;
}
.f-w1{
	top:20px;
	left:18px;
}
.f-w2{
	top:20px;
	left:74px;
}
.f-w3{
	top:20px;
	left:218px;
}
.house .door{
	position: absolute;
}
.door .door_over{
	width:86px;
	border:4px solid rgb(212,78,69);
	position: absolute;
	top:-8px;
	left:121px;
}
.door .door_body{
	width:76px;
	height:94px;
	background:rgb(198,44,34);
	position: absolute;
	left:130px;
}
.door_body:before{
	content: '餐厅';
	display: inline-block;
	width: 76px;
	color:#fff;
	font-size:24px;
	font-weight: bolder;
	position: absolute;
	text-align: center;
	top:2px;
}
.leftDoor,.rightDoor{
	width:26px;
	height: 58px;
	background: rgb(49,89,148);
	position: absolute;
	top:34px;
	left:9px;
	border-top:2px solid rgb(112,151,194);
}
.leftDoor{
	border-right:2px solid rgb(112,151,194);
}
.rightDoor{
	border-left:2px solid rgb(112,151,194);
	left:40px;
}
.trees{
	position: relative;
}
.trees .leftTree,.trees .rightTree{
	width:40px;
	height: 40px;
	background: rgb(144,193,56);
	border-radius: 50%;
	position: absolute;
	left:105px;
	top:87px;
	z-index: 4;
}
.trees .rightTree{
	left:396px;
}
.trees .r2{
	left:450px;
}
.trees .l2{
	left:50px;
}
.leftTree span,.rightTree span{
	display: inline-block;
	width:14px;
	height:4px;
	border-top:3px solid rgba(255,255,255,0.5);
	border-bottom:3px solid rgba(255,255,255,0.5);
	position: absolute;
	left:24px;
	top:10px;
	-webkit-transform:rotate(-30deg);
	-moz-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	-ms-transform:rotate(-30deg);
	transform:rotate(-30deg);
}
.leftTree:after,.rightTree:after{
	content: '';
	display: inline-block;
	height: 33px;
	border:2px solid rgb(235,97,0);
	position: absolute;
	top:40px;
	left:18px;
}
.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:7;
	-webkit-animation:car_drive 5s ease-in infinite;
	-moz-animation:car_drive 5s ease-in infinite;
	-o-animation:car_drive 5s ease-in infinite;
	-ms-animation:car_drive 5s ease-in infinite;
	animation:car_drive 5s ease-in infinite;
}
@-webkit-keyframes car_drive{
	0%{
		left:880px;
	}
	11%{
		left:615px;
		top:340px;
		-webkit-transform:rotate(0deg);
	}
	12%{
		left:580px;
		top:320px;
		-webkit-transform:rotate(-10deg);
	}
	13%{
		left:550px;
		top:325px;
		-webkit-transform:rotate(-8deg);
	}
	15%,20%{
		left:470px;
		top:340px;
		-webkit-transform:rotate(0deg);
	}
	50%{
		left:400px;
	}
	100%{
		left:-100px;
	}
}
@-moz-keyframes car_drive{
	0%{
		left:880px;
	}
	11%{
		left:615px;
		top:340px;
		-moz-transform:rotate(0deg);
	}
	12%{
		left:580px;
		top:320px;
		-moz-transform:rotate(-10deg);
	}
	13%{
		left:550px;
		top:325px;
		-moz-transform:rotate(-8deg);
	}
	15%,20%{
		left:470px;
		top:340px;
		-moz-transform:rotate(0deg);
	}
	50%{
		left:400px;
	}
	100%{
		left:-100px;
	}
}
@-o-keyframes car_drive{
	0%{
		left:880px;
	}
	11%{
		left:615px;
		top:340px;
		-o-transform:rotate(0deg);
	}
	12%{
		left:580px;
		top:320px;
		-o-transform:rotate(-10deg);
	}
	13%{
		left:550px;
		top:325px;
		-o-transform:rotate(-8deg);
	}
	15%,20%{
		left:470px;
		top:340px;
		-o-transform:rotate(0deg);
	}
	50%{
		left:400px;
	}
	100%{
		left:-100px;
	}
}
@-ms-keyframes car_drive{
	0%{
		left:880px;
	}
	11%{
		left:615px;
		top:340px;
		-ms-transform:rotate(0deg);
	}
	12%{
		left:580px;
		top:320px;
		-ms-transform:rotate(-10deg);
	}
	13%{
		left:550px;
		top:325px;
		-ms-transform:rotate(-8deg);
	}
	15%,20%{
		left:470px;
		top:340px;
		-ms-transform:rotate(0deg);
	}
	50%{
		left:400px;
	}
	100%{
		left:-100px;
	}
}
@keyframes car_drive{
	0%{
		left:880px;
	}
	11%{
		left:615px;
		top:340px;
		transform:rotate(0deg);
	}
	12%{
		left:580px;
		top:320px;
		transform:rotate(-10deg);
	}
	13%{
		left:550px;
		top:325px;
		transform:rotate(-8deg);
	}
	15%,20%{
		left:470px;
		top:340px;
		transform:rotate(0deg);
	}
	50%{
		left:400px;
	}
	100%{
		left:-100px;
	}
}
.car .car_body{
	position: absolute;
	-webkit-animation:carBody_shake 5s ease-in infinite;
	-moz-animation:carBody_shake 5s ease-in infinite;
	-o-animation:carBody_shake 5s ease-in infinite;
	-ms-animation:carBody_shake 5s ease-in infinite;
	animation:carBody_shake 5s ease-in infinite;
}
@-webkit-keyframes carBody_shake{
	0%,16%,18.3%,100%{
		top:0;
	}
	17.4%{
		top:8px;
	}
}
@-moz-keyframes carBody_shake{
	0%,16%,18.3%,100%{
		top:0;
	}
	17.4%{
		top:8px;
	}
}
@-o-keyframes carBody_shake{
	0%,16%,18.3%,100%{
		top:0;
	}
	17.4%{
		top:8px;
	}
}
@-ms-keyframes carBody_shake{
	0%,16%,18.3%,100%{
		top:0;
	}
	17.4%{
		top:8px;
	}
}
@keyframes carBody_shake{
	0%,16%,18.3%,100%{
		top:0;
	}
	17.4%{
		top:8px;
	}
}
.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;
	-webkit-animation:exhaust_move 5s ease-in infinite;
	-moz-animation:exhaust_move 5s ease-in infinite;
	-o-animation:exhaust_move 5s ease-in infinite;
	-ms-animation:exhaust_move 5s ease-in infinite;
	animation:exhaust_move 5s ease-in infinite;
}
@-webkit-keyframes exhaust_move{
	0%,20%{
		opacity: 0;
	}
	25%{
		left:75px;
		opacity:1;
	}
	30%{
		opacity: 0;
		left:87px;
		top:50px;
	}
	100%{
		opacity: 0;
	}
}
@-moz-keyframes exhaust_move{
	0%,20%{
		opacity: 0;
	}
	25%{
		left:75px;
		opacity:1;
	}
	30%{
		opacity: 0;
		left:87px;
		top:50px;
	}
	100%{
		opacity: 0;
	}
}
@-o-keyframes exhaust_move{
	0%,20%{
		opacity: 0;
	}
	25%{
		left:75px;
		opacity:1;
	}
	30%{
		opacity: 0;
		left:87px;
		top:50px;
	}
	100%{
		opacity: 0;
	}
}
@-ms-keyframes exhaust_move{
	0%,20%{
		opacity: 0;
	}
	25%{
		left:75px;
		opacity:1;
	}
	30%{
		opacity: 0;
		left:87px;
		top:50px;
	}
	100%{
		opacity: 0;
	}
}
@keyframes exhaust_move{
	0%,20%{
		opacity: 0;
	}
	25%{
		left:75px;
		opacity:1;
	}
	30%{
		opacity: 0;
		left:87px;
		top:50px;
	}
	100%{
		opacity: 0;
	}
}
.cloud{
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	left:-60px;
	top:20px;
	-webkit-animation:cloud_move 8s linear infinite;
	-moz-animation:cloud_move 8s linear infinite;
	-o-animation:cloud_move 8s linear infinite;
	-ms-animation:cloud_move 8s linear infinite;
	animation:cloud_move 8s linear infinite;
}
.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;
}
@-webkit-keyframes cloud_move{
	0%{
		left:-60px;
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	100%{
		left:500px;
		opacity: 0;
	}
}
@-moz-keyframes cloud_move{
	0%{
		left:-60px;
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	100%{
		left:500px;
		opacity: 0;
	}
}
@-o-keyframes cloud_move{
	0%{
		left:-60px;
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	100%{
		left:500px;
		opacity: 0;
	}
}
@-ms-keyframes cloud_move{
	0%{
		left:-60px;
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	100%{
		left:500px;
		opacity: 0;
	}
}
@keyframes cloud_move{
	0%{
		left:-60px;
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	100%{
		left:500px;
		opacity: 0;
	}
}

.car2{
	position: absolute;
	left:900px;
	top:250px;
	z-index:5;
	-webkit-animation:car2_drive 5s ease-in infinite;
	-moz-animation:car2_drive 5s ease-in infinite;
	-o-animation:car2_drive 5s ease-in infinite;
	-ms-animation:car2_drive 5s ease-in infinite;
	animation:car2_drive 5s ease-in infinite;
}
@-webkit-keyframes car2_drive{
	0%,20%{
	}
	60%,100%{
		left:-150px;
	}
}
@-moz-keyframes car2_drive{
	0%,20%{
	}
	60%,100%{
		left:-150px;
	}
}
@-o-keyframes car2_drive{
	0%,20%{
	}
	60%,100%{
		left:-150px;
	}
}
@-ms-keyframes car2_drive{
	0%,20%{
	}
	60%,100%{
		left:-150px;
	}
}
@keyframes car2_drive{
	0%,20%{
	}
	60%,100%{
		left:-150px;
	}
}
.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;
}

总结

好了，以上就是我们的卡通小车动画效果。本文主要介绍了动画小车场景动画流程,文中使用了定位,位置的层级关系,还有动画的旋转角度,放大缩小属性的使用.以上内容介绍到这里,感谢观看,期待大家的点赞与支持,谢谢~

avatar
文章
阅读
粉丝
相关推荐
CSS 还原拉斯维加斯球数字动画
37k阅读
 · 
339点赞
一个炫酷的css动画
7.4k阅读
 · 
191点赞
玩转css逐帧动画，纯css让哥哥动起来💃
11k阅读
 · 
80点赞
css动画资料卡片
5.0k阅读
 · 
99点赞
css水滴登录界面
37k阅读
 · 
247点赞
滴滴首页动画实现
42k阅读
 · 
460点赞
巧用 CSS 变量，实现动画函数复用，制作高级感拉满的网格动画
23k阅读
 · 
195点赞
CSS 实现跳动的方块动画
6.7k阅读
 · 
132点赞
30个css动画效果，持续更新中...
22k阅读
 · 
290点赞
两行CSS让页面提升了近7倍渲染性能！
111k阅读
 · 
1.9k点赞

友情链接：