@import url(http://fonts.googleapis.com/css?family=Nosifer);
body
{
padding:0;
margin:0;
background:#fff;
overflow:hidden;
}
.description
{
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
font-weight:bold;
margin:0 auto;
text-align:center;
padding:20px 0 0 0;
color:#333;
text-shadow:2px 2px 10px #aaa;
}
.description #red
{
color:#F30;
font-weight:normal;
}
.truck
{
margin:05px 0 0 -360px;
width:350px;
height:210px;
border:1px solid #fff;
position:absolute;
display:block;
-webkit-animation: truckMove 6s linear .5s infinite;
-moz-animation: truckMove 6s linear .5s infinite;
-o-animation: truckMove 6s linear .5s infinite;
-ms-animation: truckMove 6s linear .5s infinite;
animation: truckMove 6s linear .5s infinite;
}
.truck *{ position:absolute;}
.truck #truckBack{
display:block;
height: 115px;
width: 190px;
-webkit-border-radius:6px 6px 0 6px;
-moz-border-radius:6px 6px 0 6px;
-o-border-radius:6px 6px 0 6px;
-ms-border-radius:6px 6px 0 6px;
border-radius:6px 6px 0 6px;
border:1px solid #ddd;
background: rgb(252,255,244); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZmZmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2RmZTVkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiM2JlYWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(40%,rgba(223,229,215,1)), color-stop(100%,rgba(179,190,173,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-8 */
-webkit-animation: backShaking .222s linear .2s infinite;
-moz-animation: backShaking .222s linear .2s infinite;
-o-animation: backShaking .222s linear .2s infinite;
-ms-animation: backShaking .222s linear .2s infinite;
animation: backShaking .222s linear .2s infinite;
}
.truck #truckBack p{
-webkit-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-ms-transform:rotate(25deg);
-o-transform:rotate(25deg);
transform:rotate(25deg);
font-family: 'Nosifer', cursive;
font-weight:bold;
font-size:26px;
color:#06F;
margin:8px 0 0 25px;
display:block;
text-align:center;
}
.truck #truckFront{
border-bottom: 95px solid #F90;
border-right: 50px solid transparent;
height: 0;
width: 70px;
margin:20px 0 0 190px;
-webkit-animation: frontShaking .232s linear .2s infinite;
-moz-animation: frontShaking .232s linear .2s infinite;
-o-animation: frontShaking .232s linear .2s infinite;
-ms-animation: frontShaking .232s linear .2s infinite;
animation: frontShaking .232s linear .2s infinite;
}
.truck #truckFront::before{
content:'';
height:7px;
width: 20px;
margin:50px 0 0 15px;
z-index:2000;
background-color:#000;
position:absolute;
border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
-ms-border-radius:6px;
-webkit-border-radius:6px;
}
.truck #truckFront::after{
content:'';
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #FF9;
border-bottom: 50px solid transparent;
position:absolute;
left:163%;
margin-top:18px;
}
.truck #truckBumper{
height: 45px;
width: 70px;
background-color:#F90;
margin:70px 0 0 240px;
-webkit-animation: bumperShaking .232s linear .2s infinite;
-moz-animation: bumperShaking .232s linear .2s infinite;
-o-animation: bumperShaking .232s linear .2s infinite;
-ms-animation: bumperShaking .232s linear .2s infinite;
animation: bumperShaking .232s linear .2s infinite;
}
.truck #truckBumper::after{
content:'';
height: 45px;
width: 70px;
background-color:#F90;
margin:-13px 0 0 -5px;
position:absolute;
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
-ms-transform:rotate(20deg);
transform:rotate(20deg);
}
.truck #truckFront #truckWindow{
border-bottom: 35px solid #000;
border-right: 18px solid transparent;
height:0;
width: 57px;
margin:5px 0 0 10px;
z-index:1000;
-webkit-border-radius:5px 0 0 0;
-moz-border-radius:5px 0 0 0;
-o-border-radius:5px 0 0 0;
-ms-border-radius:5px 0 0 0;
border-radius:5px 0 0 0;
}
.truck #truckFront #ForntBumper{
height:18px;
width: 30px;
margin:77px 0 0 95px;
z-index:1000;
background-color:#444;
border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
-ms-border-radius:6px;
-webkit-border-radius:6px;
border:1px solid #333;
}
.truck #truckFront #ForntBumper::after{
content:'';
height:20px;
width: 10px;
margin:-21px 0 0 15px;
z-index:1000;
background-color:#CCC;
position:absolute;
border-radius:6px 0 0 0;
-moz-border-radius:6px 0 0 0;
-o-border-radius:6px 0 0 0;
-ms-border-radius:6px 0 0 0;
-webkit-border-radius:6px 0 0 0;
border-top:1px solid #888;
}
#rearWheel,#frontWheel
{
width:58px;
height:58px;
display:block;
background-color:#000;
z-index:2000;
border:2px dashed #fff;
-webkit-border-radius:58px;
-moz-border-radius:58px;
-o-border-radius:58px;
-ms-border-radius:58px;
border-radius:58px;
-webkit-animation: wheelRotation 1.9s linear .2s infinite;
-o-animation: wheelRotation 1.9s linear .2s infinite;
-moz-animation: wheelRotation 1.9s linear .2s infinite;
-ms-animation: wheelRotation 1.9s linear .2s infinite;
animation: wheelRotation 1.9s linear .2s infinite;
}
#frontWheel
{
margin:90px 0 0 235px;
}
#rearWheel
{
margin:90px 0 0 45px;
}
#innerWhite
{
width:36px;
height:36px;
-webkit-border-radius:36px;
-moz-border-radius:36px;
-o-border-radius:36px;
-ms-border-radius:36px;
border-radius:36px;
display:block;
background-color:#fff;
z-index:2000;
margin:11px 0 0 12px;
}
#innerBlack
{
width:24px;
height:24px;
-webkit-border-radius:24px;
-moz-border-radius:24px;
-o-border-radius:24px;
-ms-border-radius:24px;
border-radius:24px;
display:block;
background-color:#000;
z-index:2000;
margin:6px 0 0 6px;
}
#innerWhite2
{
width:10px;
height:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
display:block;
background-color:#fff;
z-index:2000;
margin:7px 0 0 7px;
}
#smoke1,#smoke2,#smoke3
{
opacity:0;
filter:alpha(opacity=0);
}
#smoke1
{
display:block;
width:16px;
height:16px;
border-radius:8px;
-moz-border-radius:8px;
-o-border-radius:8px;
-ms-border-radius:8px;
-webkit-border-radius:8px;
position:absolute;
background:#aaa;
margin:88px 0 0 -20px;
-webkit-animation: smoke 2.9s linear 1.9s infinite;
-moz-animation: smoke 2.9s linear 1.9s infinite;
-o-animation: smoke 2.9s linear 1.9s infinite;
-ms-animation: smoke 2.9s linear 1.9s infinite;
animation: smoke 2.9s linear 1.9s infinite;
}
#smoke2
{
display:block;
width:36px;
height:36px;
border-radius:18px;
-moz-border-radius:18px;
-ms-border-radius:18px;
-o-border-radius:18px;
-webkit-border-radius:18px;
position:absolute;
background:#ddd;
margin:68px 0 0 -56px;
-webkit-animation: smoke 2s linear 2.9s infinite;
-moz-animation: smoke 2s linear 2.9s infinite;
-o-animation: smoke 2s linear 2.9s infinite;
-ms-animation: smoke 2s linear 2.9s infinite;
animation: smoke 2s linear 2.9s infinite;
}
#smoke3
{
display:block;
width:38px;
height:38px;
border-radius:19px;
-moz-border-radius:19px;
-ms-border-radius:19px;
-o-border-radius:19px;
-webkit-border-radius:19px;
position:absolute;
background:#eaeaea;
margin:38px 0 0 -86px;
-webkit-animation: smoke 2s linear 1.9s infinite;
-moz-animation: smoke 2s linear 1.9s infinite;
-o-animation: smoke 2s linear 1.9s infinite;
-ms-animation: smoke 2s linear 1.9s infinite;
animation: smoke 2s linear 1.9s infinite;
}
@-webkit-keyframes backShaking
{
0%{margin-top:-3px;}
100%{margin-top:0;}
}
@-moz-keyframes backShaking
{
0%{margin-top:-3px;}
100%{margin-top:0;}
}
@-ms-keyframes backShaking
{
0%{margin-top:-3px;}
100%{margin-top:0;}
}
@-o-keyframes backShaking
{
0%{margin-top:-3px;}
100%{margin-top:0;}
}
@keyframes backShaking
{
0%{margin-top:-3px;}
100%{margin-top:0;}
}
@-webkit-keyframes frontShaking
{
0%{margin:17px 0 0 190px;}
100%{margin:20px 0 0 190px;}
}
@-moz-keyframes frontShaking
{
0%{margin:17px 0 0 190px;}
100%{margin:20px 0 0 190px;}
}
@-o-keyframes frontShaking
{
0%{margin:17px 0 0 190px;}
100%{margin:20px 0 0 190px;}
}
@-ms-keyframes frontShaking
{
0%{margin:17px 0 0 190px;}
100%{margin:20px 0 0 190px;}
}
@keyframes frontShaking
{
0%{margin:17px 0 0 190px;}
100%{margin:20px 0 0 190px;}
}
@-webkit-keyframes bumperShaking
{
0%{margin:67px 0 0 240px;}
100%{margin:70px 0 0 240px;}
}
@-moz-keyframes bumperShaking
{
0%{margin:67px 0 0 240px;}
100%{margin:70px 0 0 240px;}
}
@-o-keyframes bumperShaking
{
0%{margin:67px 0 0 240px;}
100%{margin:70px 0 0 240px;}
}
@-ms-keyframes bumperShaking
{
0%{margin:67px 0 0 240px;}
100%{margin:70px 0 0 240px;}
}
@keyframes bumperShaking
{
0%{margin:67px 0 0 240px;}
100%{margin:70px 0 0 240px;}
}
@-webkit-keyframes wheelRotation
{
0%{
-webkit-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
-ms-transform:rotateZ(0deg);
transform:rotateZ(0deg);
}
100%{
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);
-ms-transform:rotateZ(360deg);
-o-transform:rotateZ(360deg);
transform:rotateZ(360deg);
}
}
@-moz-keyframes wheelRotation
{
0%{
-webkit-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
-ms-transform:rotateZ(0deg);
transform:rotateZ(0deg);
}
100%{
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);
-ms-transform:rotateZ(360deg);
-o-transform:rotateZ(360deg);
transform:rotateZ(360deg);
}
}
@-o-keyframes wheelRotation
{
0%{
-webkit-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotateZ(0deg);
transform:rotateZ(0deg);
}
100%{
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);
-ms-transform:rotateZ(360deg);
-o-transform:rotate(360deg);
transform:rotateZ(360deg);
}
}
@-ms-keyframes wheelRotation
{
0%{
-webkit-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
-ms-transform:rotateZ(0deg);
transform:rotateZ(0deg);
}
100%{
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);
-ms-transform:rotateZ(360deg);
-o-transform:rotateZ(360deg);
transform:rotateZ(360deg);
}
}
@keyframes wheelRotation
{
0%{
-webkit-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
-ms-transform:rotateZ(0deg);
transform:rotateZ(0deg);
}
100%{
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);
-ms-transform:rotateZ(360deg);
-o-transform:rotateZ(360deg);
transform:rotateZ(360deg);
}
}
@-webkit-keyframes truckMove
{
0%{margin-left:-300px;}
100%{left:130%;}
}
@-moz-keyframes truckMove
{
0%{margin-left:-300px;}
100%{margin-left:100%;}
}
@-ms-keyframes truckMove
{
0%{margin-left:-300px;}
100%{left:130%;}
}
@-o-keyframes truckMove
{
0%{margin-left:-300px;}
100%{margin-left:100%;}
}
@keyframes truckMove
{
0%{margin-left:-300px;}
100%{left:130%;}
}
@keyframes smoke
{
0%{
opacity:0;filter:alpha(opacity=0);
}
100%{
opacity:1;filter:alpha(opacity=100);
}
}
@-webkit-keyframes smoke
{
0%{
opacity:0;filter:alpha(opacity=0);
}
100%{
opacity:1;filter:alpha(opacity=100);
}
}
@-moz-keyframes smoke
{
0%{
opacity:0;filter:alpha(opacity=0);
}
100%{
opacity:1;filter:alpha(opacity=100);
}
}
@-ms-keyframes smoke
{
0%{
opacity:0;filter:alpha(opacity=0);
}
100%{
opacity:1;filter:alpha(opacity=100);
}
}
@-o-keyframes smoke
{
0%{
opacity:0;filter:alpha(opacity=0);
}
100%{
opacity:1;filter:alpha(opacity=100);
}
}