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