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;
.........完整代码请登录后点击上方下载按钮下载查看