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

css实现一个冰淇淋车行驶动画效果代码

代码语言：html

所属分类：动画

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

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


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

<head>

  <meta charset="UTF-8">

  
<style>
body{
  background:#dbdbdb;
}
.container{
  position:relative;
  width:800px;
  height:400px;
  margin:0px auto;
}
.coche {
  position: absolute;
  width: 330px;
  height: 271px;
  margin: 20px 0;
  background: white;
  border-radius: 50% / 10%;
  margin:192px 221px;
  -webkit-animation: rodar3 .21s alternate infinite;
          animation: rodar3 .21s alternate infinite;
}
.coche:before {
  content: '';
  position: absolute;
  top: 9%;
  bottom: 9%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}
.coche::after {
  content:"";
  position: absolute;
  width: 75px;
  height: 93px;
  background: white;
  border-radius: 50% / 10%;
  margin: 152px 300px
}
.ruedas{
  position:absolute;
  width:112px;
  height:60px;
  border-radius: 112px 112px 0 0;
  background:#dbdbdb;
  margin:221px 12px;
  }
.ruedas::before{
  content:"";
  position:absolute;
  width:112px;
  height:60px;
  border-radius: 112px 112px 0 0;
  background:#dbdbdb;
  margin:0px 192px;
}
.ventanas{
  position:absolute;
  width:172px;
  height:121px;
  background: rgba(219,219,219,1);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(219,219,219,1)), color-stop(45%, rgba(219,219,219,1)), color-stop(45%, rgba(233,233,233,1)), color-stop(69%, rgba(233,233,233,1)), color-stop(69%, rgba(233,233,233,1)), color-stop(69%, rgba(219,219,219,1)), color-stop(81%, rgba(219,219,219,1)), color-stop(81%, rgba(233,233,233,1)), color-stop(88%, rgba(233,233,233,1)), color-stop(88%, rgba(219,219,219,1)), color-stop(100%, rgba(219,219,219,1)));
background: linear-gradient(135deg, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 45%, rgba(233,233,233,1) 45%, rgba(233,233,233,1) 69%, rgba(233,233,233,1) 69%, rgba(219,219,219,1) 69%, rgba(219,219,219,1) 81%, rgba(233,233,233,1) 81%, rgba(233,233,233,1) 88%, rgba(219,219,219,1) 88%, rgba(219,219,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#dbdbdb', GradientType=1 );
  border-radius:30px;
  margin:30px 30px;
}
.ventanas::before{
  content:"";
  position:absolute;
  width: 70px;
  height:121px;
  border-radius: 30px 90px 12px 12px;
  background:#dbdbdb;
  margin:0px 212px;
}
.linea{
  position:absolute;
  width:412px;
  height:21px;
  border-radius: 12px 12px 0 0;
  background:#ffcdad;
  margin:182px -21px;
  z-index:3;
}
.linea::before{
  content:"";
  position:absolute;
  width:412px;
  height:12px;
  border-radius: 0 0 12px 12px;
  background:#f3ad7e;
  margin:21px 0px;
  z-index:3;
}
ul{
  position:absolute;
  width:192px;
  height:35px;
  margin:33px -9px;
  list-style:none;
}
ul li{
  display:inline-block;
  width:30px;
  height:30px;
  border-radius:0 0 30px 30px;
  background:white;
 
}
ul li:nth-child(1), ul li:nth-child(3), ul li:nth-child(5){
  background:#f76a6a;
}
ul li:nth-child(2), ul li:nth-child(4){
  background:#f9a3a3;
}
.ruedas3,.ruedas7{
  position:absolute;
  width:50px;
  height:45px;
  border-radius:100%;
  border:21px solid #875e46;
  background:#ffcdad;
  transform:rotate(0deg);
  -webkit-animation: vueltas .9s linear infinite;
          animation: vueltas .9s linear infinite;
}
.ruedas3{margin: 231px 23px;}
.ruedas7{margin:231px 212px;}
.ice{
  position:absolute;
  width: 0;
  height: 0;
  border-left: 21px solid transparent;
  .........完整代码请登录后点击上方下载按钮下载查看