css实现疯狂的出租车行驶动画效果代码-html代码-BFW代码库

css实现疯狂的出租车行驶动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现疯狂的出租车行驶动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: consolas;
        }
        
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          background-color: #ededed;
        }
        
        .road {
          position: relative;
          width: 700px;
          height: 150px;
          background-color: #333;
          border-radius: 75px;
          display: flex;
          justify-content: center;
          align-items: center;
          transform-style: preserve-3d;
          perpective: 500px;
        }
        .road::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 4px;
          background: linear-gradient(90deg, #fff, #fff 50%, transparent 50%, transparent 100%);
          background-size: 50px;
          animation: animate_road 0.125s linear infinite;
        }
        
        @keyframes animate_road {
          0% {
            background-position: 50px 0;
          }
          100% {
            background-position: 0 0;
          }
        }
        .taxi {
          position: absolute;
          left: 50px;
          width: 200px;
          height: 80px;
          background-color: #f4b603;
          border-radius: 10px;
          box-shadow: -10px 10px rgba(0, 0, 0, 0.25);
          transform-style: preserve-3d;
          perpective: 800px;
          animation: animate_taxi 2s linear infinite;
          z-index: 10;
        }
        .taxi:nth-child(2) {
          left: initial;
          right: 150px;
          animation: animate_taxi 4s linear infinite;
          animation-delay: -1s;
          z-index: 9;
        }
        .taxi::before {
          content: "";
          position: absolute;
          top: 12px;
          left: 2px;
          width: 5px;
          height: 15px;
          border-radius: 2px;
          background-color: #fc3c25;
          box-shadow: 0 42px #fc3c25;
        }
        .taxi::after {
          content: "";
          position: absolute;
          top: 10px;
          right: 2px;
          width: 6px;
          height: 16px;
          border-radius: 2px;
          background-color: #fff;
          box-shadow: 0 44px #fff;
        }
        .taxi span {
          position: absolute;
          inset: 5px 10px;
          background-color: #fdd206;
          border-radius: 10px;
          overflow: hidden;
        }
        .taxi span::before {
          content: "Taxi";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) rotate(90deg);
          background-color: #fff;
          padding: 2px;
          font-size: 0.75em;
          font-weight: 900;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          border-radius: 2px;
          box-shadow: 0 0 0 1px #0005;
          z-index: 10;
        }
        .taxi span strong {
          position: absolute;
          inset: 0 30px;
          background-color: #.........完整代码请登录后点击上方下载按钮下载查看