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