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

无div纯css实现一个响应式卡车动画效果

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