纯css无div绘制跑跑卡丁车动画效果代码-html代码-BFW代码库

纯css无div绘制跑跑卡丁车动画效果代码

代码语言：html

所属分类：动画

代码描述：纯css无div绘制跑跑卡丁车动画效果代码

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

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

     <style>
     *{margin:0;padding:0;list-style-type:none;}
:root {
  --unit: 1vmin;
  --land: #8f743d;
  --dirt: #d1bd94;
  --green: #6eb34d;
  --green--two: #588f3d;
  --green--three: #426b2e;
  --road--one: #666;
  --road--two: #808080;
  --bear--one: #73400d;
  --bear--two: #5c330a;
  --cap-peak--one: #ff2b00;
  --cap-peak--two: #a52b12;
  --cap-body--one: #262626;
  --cap-body--two: #4d4d4d;
  --car--one: #c33;
  --car--two: #a32929;
  --car--three: #e6a219;
  --car--four: #f5f5f5;
  --car--five: #a6a6a6;
  --car--six: #737373;
  --car--seven: #262626;
  --tyre--one: #0d0d0d;
  --tyre--two: #262626;
  --tyre--three: #808080;
  --rock--one: #a68059;
  --rock--two: #634d36;
  --burm: #e63b19;
  --cloud: #fff;
}
html {
  font-size: var(--unit);
}
body {
  --landscape: linear-gradient(var(--green), var(--green)) 0 100%/100% 57.25%;
  --hill: radial-gradient(var(--green--two) 0 69%, transparent 70% 100%) 20% 45%/30em 30em;
  --hill--two: radial-gradient(var(--green--three) 0 69%, transparent 70% 100%) 10% 45%/40em 40em;
  --cloud--one: radial-gradient(var(--cloud) 0 69%, transparent 70% 100%) calc(100% - 50em) 15%/20em 20em;
  --cloud--two: radial-gradient(var(--cloud) 0 69%, transparent 70% 100%) calc(100% - 40em) 12%/20em 20em;
  --cloud--three: radial-gradient(var(--cloud) 0 69%, transparent 70% 100%) calc(100% - 60em) 15%/20em 20em;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: var(--landscape), var(--hill), var(--hill--two), var(--cloud--one), var(--cloud--two), var(--cloud--three);
  background-repeat: no-repeat;
  background-color: #d9eef2;
  min-height: 100vh;
  -webkit-perspective: 70vh;
          perspective: 70vh;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  overflow: hidden;
}
body:before {
  --road-burm--left: linear-gradient(#fff 0 20%, var(--burm) 21% 40%, #fff 41% 60%, var(--burm) 61% 80%, #fff 81% 100%) 50% 50%/36em 32em no-repeat;
  --road-markings: linear-gradient(#fff 0 49%, transparent 51% 100%) 50% 0/1em 5em repeat-y;
  --road-edges: linear-gradient(90deg, #fff 0 2%, transparent 3% 97%, #fff 98% 100%) 50% 0/30em 100% no-repeat;
  --roa.........完整代码请登录后点击上方下载按钮下载查看