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

代码语言：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: translateY(-3px) rotate(54deg) }
          20% { transform: translateY(0) rotate(72deg) }
          30% { transform: translateY(0) rotate(108deg) }
          35% { transform: translateY(6px) rotate(126deg) }
          40% { transform: translateY(-3px) rotate(144deg) }
          45% { transform: translateY(0) rotate(162deg) }
          50% { transform: translateY(4px) rotate(180deg) }
          55% { transform: translateY(-2px) rotate(198deg) }
          60% { transform: translateY(0) rotate(216deg) }
          100% { transform: translateY(0) rotate(360deg) }
        }
        
        .back-wheel {
          animation: wheel 2s linear infinite;
          animation-delay: 100ms;
          transform-origin: 64.48px 124px;
        }
        
        .front-wheel {
          animation: wheel 2s linear infinite;
          transform-origin: 164px 138px;
        }
        
        .pipe {
          animation: body-kick 2s linear infinite;
          animation-delay: 150ms;
        }
        
        .body {
          animation: body-kick 2s linear infinite;
          animation-delay: 100ms;
        }
        
        .window {
          animation: body-kick 2s linear infinite;
          animation-delay: 100ms;
        }
        
        .copy {
          width: 100%;
          font-size: 0.8rem;
          position: absolute;
          bottom: 10px;
          text-align: center;
          opacity: 0.5;
        }
    </style>

</head>

<body>
    <div id="tractor" class="tractor">
        <svg viewBox="0 0 200 200">
      <g class="pipe" fill="#5B3514">
        <path d="M123.15 37.252l-15.793-11.693v7.195l9.333 7.584 6.46-3.086zM149.253 110.032V74.666c0-.328.267-.596.596-.596h2.521c.329 0 .597.267.597.596v35.366a.597.597 0 0 1-.597.596h-2.521a.596.596 0 0 1-.596-.596zM129.548 110.032V74.666c0-.328.268-.596.596-.596h2.522c.328 0 .596.267.596.596v35.366a.597.597 0 0 1-.596.596h-2.522a.596.596 0 0 1-.596-.596zM135.123 110.162V70.518c0-.33.267-.597.596-.597h2.521c.329 0 .597.267.597.597v39.644a.597.597 0 0 1-.597.596h-2.521a.596.596 0 0 1-.596-.596z"/>
        <path d="M151.81 81.371h-15.012a.596.596 0 0 1-.596-.596v-2.521c0-.329.267-.597.596-.597h15.012c.33 0 .597.268.597.597v2.521a.596.596 0 0 1-.597.596zM116.325 37.252h6.825v51.856h-6.825z"/>
      </g>
      <g class="body">
        <path d="M174.814 138.332v-51.13c0-8.037-55.66-6.329-55.66-6.329V43.125c0-9.852-64.203-9.334-64.203-3.112v98.318h119.863v.001z" fill="#FEBD33"/>
        <path d="M88.504 138.332h72.891c.538-13.022-.303-48.51-.303-50.61 0-3.89-42.133-4.149-42.133.259v29.817h-12.316l-18.139 20.534z" fill="#FAA334"/>
        <path d="M156.866 92.392H121.5a.598.598 0 0 1-.597-.598v-2.52c0-.33.267-.596.597-.596h35.366c.328 0 .596.266.596.596v2.52c0 .33-.268.598-.596.598zM156.866 98.757H121.5a.597.597 0 0 1-.597-.597v-2.52c0-.33.267-.596.597-.596h35.366c.328 0 .596.266.596.596v2.52c0 .33-.268.597-.596.597zM156.866 105.077H121.5a.598.598 0 0 1-.597-.596v-2.522c0-.328.267-.596.597-.596h35.366c.328 0 .596.268.596.596v2.522a.597.597 0 0 1-.596.596z" fill="#5B3514"/>
        <path d="M104.958 86.813a4.02 4.02 0 0 1 8.038 0 4.021 4.021 0 0 1-4.019 4.019 4.021 4.021 0 0 1-4.019-4.019z" fill="#FAA334"/>
        <path d="M106.513 86.813a2.465 2.465 0 1 1 2.464 2.464 2.465 2.465 0 0 1-2.464-2.464z" fill="#5B3514"/>
      </g>
      .........完整代码请登录后点击上方下载按钮下载查看