无div纯css实现一个响应式卡车动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：无div纯css实现一个响应式卡车动画效果，body中无任何元素，纯css实现

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  box-sizing: border-box;
}
:root {
  --desired-size: 50;
  --unit: calc((var(--desired-size) / 378) * 1vmin);
  --tyre-base: #4d4d4d;
  --tyre-front: #737373;
  --tyre-hub: #f2f2f2;
  --tyre-rear-base: #333;
  --tyre-rear-front: #595959;
  --tyre-rear-hub: #8c8c8c;
  --bumper-one: #ccc;
  --grill: #e6e6e6;
  --bonnet: #609;
  --body: #80c;
  --cab: #80c;
  --chassis: #000;
  --glass: #b3ffff;
  --mirror: #406;
  --shine: rgba(255,255,255,0.8);
  --taillight: #c00;
  --headlight: #fff6cc;
  --alloy: #b3b3b3;
  --rad: #1a1a1a;
  --indicator: #e68019;
  --sign: #478547;
  --sign-border: #fafafa;
  --post: #734d26;
  --post-shine: rgba(255,255,255,0.2);
  --road: #808080;
  --sky: #f7cfba;
  --ground: #c5b587;
}
body {
  min-height: 100vh;
  overflow: hidden;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(var(--ground)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--sky)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), to(var(--ground))), -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--road)), to(transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), to(var(--road))), repeating-linear-gradient(90deg, #fff 5vmin 10vmin, transparent 10vmin 12.5vmin, #fff 12.5vmin 17.5vmin) 0 calc(50% + 4.5vmin)/100vw 1vmin, var(--road);
  background: linear-gradient(transparent 0 calc(50% - 6vmin), var(--ground) calc(50% - 6vmin) 50%, transparent 50%), linear-gradient(var(--sky) 0 50%, transparent 50%), linear-gradient(transparent 0 calc(50% + 10vmin), var(--ground) calc(50% + 10vmin)), linear-gradient(var(--road) 0 calc(50% + 4.5vmin), transparent calc(50% + 4.5vmin)), linear-gradient(transparent 0 calc(50% + 5.5vmin), var(--road) calc(50% + 5.5vmin)), repeating-linear-gradient(90deg, #fff 5vmin 10vmin, transparent 10vmin 12.5vmin, #fff 12.5vmin 17.5vmin) 0 calc(50% + 4.5vmin)/100vw 1vmin, var(--road);
  -webkit-animation: road 1s infinite linear;
          animation: road 1s infinite linear;
}
body:after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -70%);
          transform: translate(-50%, -70%);
  height: calc(228 * var(--unit));
  width: calc(378 * var(--unit));
  -webkit-animation: bump 5s infinite linear;
          animation: bump 5s infinite linear;
  background: linear-gradient(113deg, transparent 32%, var(--shine) 32% 50%, transparent 50% 60%, var(--shine) 60% 70%, transparent 70%) calc(-4 * var(--unit)) calc(190 * var(--unit)) / calc(50 * var(--unit)) calc(20 * var(--unit)) no-repeat, linear-gradient(var(--bumper-one), var(--bumper-one)) calc(6 * var(--unit)) calc(190 * var(--unit)) / calc(116 * var(--unit)) calc(20 * var(--unit)) no-repeat, linear-gradient(var(--rad) 0 20%, transparent 20% 40%, var(--rad) 40% 60%, transparent 60% 80%, var(--rad) 80% 100%) calc(35 * var(--unit)) calc(153 * var(--unit)) / calc(60 * var(--unit)) calc(20 * var(--unit)) no-repeat, linear-gradient(var(--headlight), var(--headlight)) calc(14 * var(--unit)) calc(152 * var(--unit)) / calc(18 * var(--unit)) calc(18 * var(--unit)) no-repeat, linear-gradient(var(--headlight), var(--headlight)) calc(100 * var(--unit)) calc(152 * var(--unit)) / calc(18 * var(--unit)) calc(18 * var(--unit)) no-repeat, linear-gradient(var(--indicator), var(--indicator)) calc(14 * var(--unit)) calc(172 * var(--unit)) / calc(18 * var(--unit)) calc(6 * var(--unit)) no-repeat, linear-gradient(var(--indicator), var(--indicator)) calc(100 * var(--unit)) calc(172 * var(--unit)) / calc(18 * var(--unit)) calc(6 * var(--unit)) no-repeat, linear-gradient(113deg, transparent 32%, var(--shine) 32% 50%, transparent 50% 60%, var(--shine) 60% 70%, transparent 70%) calc(10 * var(--unit)) calc(150 * var(--unit)) / calc(50 * var(--unit)) calc(36 * var(--unit)) no-repeat, linear-gradient(var(--taillight), var(--taillight)) calc(362 * var(--unit)) calc(150 * var(--unit)) / calc(10 * var(--unit)) calc(20 * var(--unit)) no-repeat, radial-gradient(ellipse at center, var(--mirror) 50%, transparent 50%) calc(214 * var(--unit)) calc(130 * var(--unit)) / calc(32 * var(--unit)) calc(20 * var(--unit)) no-repeat, linear-gradient(var(--bonnet), var(--bonnet)) calc(12 * var(--unit)) calc(145 * var(--unit)) / calc(200 * var(--unit)) calc(5 * var(--unit)) no-repeat, linear-gradient(var(--bumper-one), var(--bumper-one)) calc(230 * var(--unit)) calc(202 * var(--unit)) / calc(40 * var(--unit)) calc(10 * var(--unit)) no-repeat, linear-gradient(var(--bumper-one), var(--bumper-one)) calc(350 * var(--unit)) calc(190 * var(--unit)) / calc(30 * var(--unit)) calc(20 * var(--unit)) no-repeat, linear-gradient(var(--body), var(--body)) calc(126 * var(--unit)) calc(175 * var(--unit)) / calc(15 * var(--unit)) calc(33 * var(--unit)) no-repeat, linear-gradient(var(--body), var(--body)) calc(260 * var(--unit)) calc(182 * var(--unit)) / calc(15 * var(--unit)) calc(26 * var(--unit)) no-repeat, linear-gradient(var(--body), var(--body)) calc(260 * var(--unit)) calc(174 * var(--unit)) / calc(75 * var(--unit)) calc(10 * var(--unit)) no-repeat, radial-gradient(ellipse at center, var(--alloy) 0 10%, transparent 10%) calc(268 * var(--unit)) calc(164 * var(--unit)) / calc(74 * var(--unit)) calc(74 * var(--unit)) no-repeat, radial-gradient(ellipse at center, var(--tyre-hub) 0 30%, transparent 30%) calc(268 * var(--unit)) calc(164 * var(--unit)) / calc(74 * var(--unit)) calc(74 * var(--unit)) no-repeat, radial-gradient(ellipse at center, var(--tyre-front) 0 50%, transparent 50%) calc(268 * var(--unit)) calc(164 * var(--unit)) / calc(74 * var(--unit)) calc(74 * var(--unit)) no-repeat, radial-gradient(ellipse at center, var(--tyre-base) 0 50%, transparent 50%) calc(260 * var(--unit)) calc(164 * var(--unit)) / calc(74 * var(--unit)) calc(74 * var(--unit)) no-repeat, radial-gradient(ellipse at center, var(--alloy) 0 10%, transparent 10%) calc(134 * var(--unit)) calc(164 * var(--unit)) / calc(74 * var(--unit)) calc(74 * var(--unit)) no-repeat, radial-gradient(ellipse at center, var(--tyre-hub) 0 30%, transparent 30%) calc(134 * var(--unit)) calc(164 * var(--unit)) / calc(74 * var(--unit)) calc(74 * var(--unit)) no-repeat, radial-gradient(ellipse at center, var(--tyre-front) 0 50%, transparent 50%) calc(134 * var(--unit)) calc(164 * var(--unit)) / calc(74 * var(--unit)) calc(74 * var(--unit)) no-repeat, radial-gradient(ellipse at center, var(--tyre-base) 0 50%, transparent 50%) calc(126 * var(--unit)) calc(164 * var(--unit)) / calc(74 * var(--unit)) calc(74 * var(--unit)) no-repeat, linear-gradient(var(--grill), var(--.........完整代码请登录后点击上方下载按钮下载查看