css+svg拖拉机行驶动画效果代码-html代码-BFW代码库

css+svg拖拉机行驶动画效果代码

代码语言：html

所属分类：动画

代码描述：css+svg拖拉机行驶动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body, html {
          height: 100%;
          background: radial-gradient(ellipse at center, #499bea 0%,#207ce5 100%);
        }
        
        .tractor {
          width: 300px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        
        .tractor #shadow {
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: -1;
          transform: scaleY(0.3);
          opacity: 0.5;
          filter: blur(20px);
        }
        
        .tractor #shadow path {
          fill: #000;
        }
        
        @keyframes body-kick {
          0% { transform: translateY(0) rotate(0deg) }
          5% { transform: translateY(0) rotate(0deg) }
          10% { transform: translateY(5px) rotate(0.5deg) }
          15% { transform: translateY(-2px) rotate(-0.5deg) }
          20% { transform: translateY(0) rotate(0deg) }
          30% { transform: translateY(0) rotate(0deg) }
          35% { transform: translateY(6px) rotate(1deg) }
          40% { transform: translateY(-2px) rotate(-0.5deg) }
          45% { transform: translateY(0) rotate(0deg) }
          50% { transform: translateY(4px) rotate(1deg) }
          55% { transform: translateY(-1px) rotate(-0.5deg) }
          60% { transform: translateY(0) rotate(0deg) }
          100% { transform: translateY(0) rotate(0deg) }
        }
        
        @keyframes wheel {
          0% { transform: translateY(0) rotate(0deg) }
          5% { transform: translateY(0) rotate(18deg) }
          10% { transform: translateY(5px) rotate(36deg) }
          15% { transform: .........完整代码请登录后点击上方下载按钮下载查看