css实现冰淇淋汽车行驶动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现冰淇淋汽车行驶动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html,body {
	padding:0;
	margin:0;
	width:100%;
	height:100%
}
.background-stuff {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#98c5e8;
	animation:wrapperIn 2s
}
.background-stuff .bg {
	position:absolute;
	top:0;
	left:-100%;
	width:50%;
	height:100%;
	background:#636ed1;
	-webkit-animation:bgIn 4s 0s linear infinite;
	-moz-animation:bgIn 4s 0s linear infinite;
	-ms-animation:bgIn 4s 0s linear infinite;
	-o-animation:bgIn 4s 0s linear infinite;
	animation:bgIn 4s 0s linear infinite;
	-webkit-transform:skewX(10deg);
	-moz-transform:skewX(10deg);
	-ms-transform:skewX(10deg);
	-o-transform:skewX(10deg);
	transform:skewX(10deg);
	z-index:1
}
.background-stuff .bg-2 {
	background:#8faaff;
	-webkit-animation:bgIn 4s 1s linear infinite;
	-moz-animation:bgIn 4s 1s linear infinite;
	-ms-animation:bgIn 4s 1s linear infinite;
	-o-animation:bgIn 4s 1s linear infinite;
	animation:bgIn 4s 1s linear infinite
}
.background-stuff .bg-3 {
	background:#5a73da;
	-webkit-animation:bgIn 4s 2s linear infinite;
	-moz-animation:bgIn 4s 2s linear infinite;
	-ms-animation:bgIn 4s 2s linear infinite;
	-o-animation:bgIn 4s 2s linear infinite;
	animation:bgIn 4s 2s linear infinite
}
.background-stuff .ground {
	position:absolute;
	bottom:0;
	margin-bottom:-1.875em;
	height:50%;
	width:100%;
	background:#ffc253;
	z-index:2
}
.container {
	height:100%;
	width:100%;
	display:table;
	overflow:hidden
}
.container .car-wrapper {
	display:table-cell;
	vertical-align:middle;
	width:100%
}
.car {
	width:20em;
	height:12.5em;
	position:relative;
	opacity:1;
	margin-left:auto;
	margin-right:auto;
	z-index:4;
	-webkit-animation:carMove .3s infinite;
	-moz-animation:carMove .3s infinite;
	-ms-animation:carMove .3s infinite;
	-o-animation:carMove .3s infinite;
	animation:carMove .3s infinite
}
.car .body {
	position:absolute;
	top:0;
	left:.875em;
	width:14.375em;
	height:10em;
	background:#fff
}
.car .body:before {
	content:"";
	position:absolute;
	left:-0.875em;
	border-radius:10px 10px 0 0;
	width:15.875em;
	z-index:2;
	height:.75em;
	background:#3190dd
}
.car .body div {
	position:absolute;
	background:#fff;
	width:18.125em;
	height:3.75em;
	bottom:-0.625em;
	border-radius:0 0 10px 10px
}
.car .body div:before {
	content:"";
	background:#fff;
	position:absolute;
	top:-1.8125em;
	right:0;
	width:5em;
	height:2.5em;
	z-index:1;
	border-radius:0 14px 0 0;
	-webkit-transform:rotate(17deg);
	-moz-transform:rotate(17deg);
	-ms-transform:rotate(17deg);
	-o-transform:rotate(17deg);
	transform:rotate(17deg)
}
.car .body div:after {
	content:"";
	background:#fff;
	position:absolute;
	top:-5.125em;
	right:1.0625em;
	width:5.625em;
	height:2.5em;
	z-index:1;
	border-radius:10px 0 0 0;
	-webkit-transform:rotate(75deg);
	-moz-transform:rotate(75deg);
	-ms-transform:rotate(75deg);
	-o-transform:rotate(75deg);
	transform:rotate(75deg)
}
.car .wheel {
	position:absolute;
	width:3.75em;
	height:3.75em;
	background:#3c464c;
	border-radius:50%;
	bottom:0;
	left:3em;
	z-index:14;
	-webkit-animation:carMove .3s .2s;
	-moz-animation:carMove .3s .2s;
	-ms-animation:carMove .3s .2s;
	-o-animation:carMove .3s .2s;
	animation:carMove .3s .2s
}
.car .wheel:before {
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	background:#fff;
	width:1.5em;
	height:1.5em;
	border-radius:50%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%)
}
.car .wheel:nth-of-type(2) {
	left:13.125em
}
.car .decos {
	width:18.125em;
	height:10.5em;
	position:absolute;
	z-index:12;
	top:0;
	left:.875em
}
.car .line-bot {
	position:absolute;
	bottom:.5625em;
	height:3px;
	width:100%;
	background:#e1e8ef
}
.car .door {
	position:absolute;
	left:7.5em;
	bottom:0;
	width:3.75em;
	height:8.8125em;
	border-radius:10px 10px 0 0;
	border:3px solid #e1e8ef;
	border-bottom:0;
	background:#fff
}
.car .door:after {
	content:"";
	position:absolute;
	top:.375em;
	left:.4375em;
	width:2.875em;
	height:2.5em;
	border-radius:4px;
	background:#5bc2ef
}
.car .door .handle {
	position:absolute;
	right:.625em;
	top:4.375em;
	width:.625em;
	height:.625em;
	background:#e1e8ef;
	border-radius:50%
}
.car .door .handle:after {
	content:"";
	width:1.25em;
	height:.25em;
	border-radius:10px;
	background:#e1e8ef;
	position:absolute;
	top:50%;
	left:-0.3125em;
	margin-top:-0.125em
}
.car .door .bottom {
	position:absolute;
	bottom:.375em;
	left:.6875em;
	width:2.375em;
	height:.75em
}
.car .door .bottom:before,.car .door .bottom:after {
	content:"";
	display:block;
	width:100%;
	height:.1875em;
	background:#e1e8ef;
	height:.25em;
	border-radius:10px;
	margin-bottom:.25em
}
.car .window {
	position:absolute;
	top:1.125em;
	left:12.5em;
	width:2em;
	background:#5bc2ef;
	height:4.5em;
	border-radius:10px 10px 0 10px
}
.car .window:before {
	content:"";
	width:100%;
	height:1.25em;
	background:#5bc2ef;
	position:absolute;
	bottom:0;
	left:0;
	width:2.9375em;
	border-radius:0 10px 10px 10px
}
.car .window:after {
	content:"";
	height:1.25em;
	background:#5bc2ef;
	position:absolute;
	top:1.0625em;
	left:-0.8125em;
	width:4.1875em;
	transform-origin:bottom;
	-webkit-transform:rotate(74deg);
	-moz-transform:rotate(74deg);
	-ms-transform:rotate(74deg);
	-o-transform:rotate(74deg);
	transform:rotate(74deg);
	border-radius:10px 10px 10px 10px
}
.car .light {
	position:absolute;
	width:.625em;
	height:.625em;
	background:#ff8c40;
	right:3.75em;
	bottom:3.125em;
	border-radius:3px
}
.car .light-front {
	position:absolute;
	width:.5em;
	height:.5em;
	background:#ff8c40;
	right:-0.1875em;
	bottom:3.5625em;
	border-radius:3px
}
.car .light-front:after {
	content:"";
	position:absolu.........完整代码请登录后点击上方下载按钮下载查看