纯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; --road: linear-gradient(0deg, var(--road--one) 0 49%, var(--road--two) 50% 100%) 50% 0/30em 10em repeat-y; --stone--one: linear-gradient(var(--rock--one) 0 60%, var(--rock--two) 61% 100%) 36% 20%/4em 4em no-repeat; --stone--two: linear-gradient(#66b814 0 60%, #593 61% 100%) 26% 60%/4em 4em no-repeat; --stone--three: linear-gradient(var(--rock--one) 0 60%, var(--rock--two) 61% 100%) 66% 50%/4em 4em no-repeat; --stone--four: linear-gradient(#337326 0 60%, #5eb34d 61% 100%) 78% 40%/4em 4em no-repeat; --stone--five: linear-gradient(var(--rock--one) 0 60%, var(--rock--two) 61% 100%) 48% 45%/4em 4em no-repeat; --stone--six: linear-gradient(var(--rock--one) 0 60%, var(--rock--two) 61% 100%) 68% 48%/4em 4em no-repeat; --stone--seven: linear-gradient(var(--rock--one) 0 60%, var(--rock--two) 61% 100%) 48% 78%/4em 4em no-repeat; --stone--eight: linear-gradient(var(--rock--one) 0 60%, var(--rock--two) 61% 100%) 65% 88%/4em 4em no-repeat; --stone--nine: linear-gradient(var(--rock--one) 0 60%, var(--rock--two) 61% 100%) 60% 10%/4em 4em no-repeat; --stone--ten: linear-gradient(var(--rock--one) 0 60%, var(--rock--two) 61% 100%) 35% 30%/4em 4em no-repeat; --curb: linear-gradient(var(--dirt), var(--dirt)) 50% 0/50em 100% no-repeat; --grass: linear-gradient(var(--green), var(--green)) 0% 0%/100% 100%; content: ''; position: absolute; height: 200vh; width: 100vw; top: 50%; left: 50%; background: var(--road-markings), var(--road-edges), var(--road), var(--road-burm--left), var(--stone--one), var(--stone--two), var(--stone--three), var(--stone--four), var(--stone--five), var(--stone--six), var(--stone--seven), var(--stone--eight), var(--stone--nine), var(--stone--ten), var(--curb), var(--grass); -webkit-animation: roll 4s infinite linear; animation: roll 4s infinite linear; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate(-50%, -50%) rotateX(80deg) translate(0, 0%); transform: translate(-50%, -50%) rotateX(80deg) translate(0, 0%); } body:after { --cap--button: linear-gradient(var(--cap-peak--one), var(--cap-peak--one)) 50% 0/4em 2em; --peak--one: linear-gradient(var(--cap-peak--one), var(--cap-peak--one)) 50% 12em/12em 10em; --peak--two: linear-gradient(var(--cap-peak--one), var(--cap-peak--one)) 50% 12em/16em 8em; --peak--three: linear-gradient(var(--cap-peak--one), var(--cap-peak--one)) 50% 10em/20em 6em; --cap--one: linear-gradient(var(--cap-body--one), var(--cap-body--one)) 50% 2em/12em 20em; --cap--two: linear-gradient(var(--cap-body--one), var(--cap-body--one)) 50% 4em/16em 16em; --cap--three: linear-gradient(var(--cap-body--one), var(--cap-body--one)) 50% 6em/20em 10em; --cap--four: linear-gradient(var(--cap-body--one), var(--cap-body--one)) 50% 8em/16em 4em; --head--one: linear-gradient(var(--bear--one), var(--bear--one)) 50% 8em/20em 26em; --head--two: linear-gradient(var(--bear--one), var(--bear--one)) 50% 6em/28em 16em; --head--three: linear-gradient(var(--bear--one), var(--bear--one)) 50% 6em/36em 6em; --head--four: linear-gradient(var(--bear--one), var(--bear--one)) 12em 4em/6em 10em; --head--five: linear-gradient(var(--bear--one), var(--bear--one)) 38em 4em/6em 10em; --head--six: linear-gradient(var(--bear--one), var(--bear--one)) 50% 20em/24em 6em; --shoulder--one: linear-gradient(var(--bear--one), var(--bear--one)) 50% 28em/24em 6em; --shoulder--two: linear-gradient(var(--bear--one), var(--bear--one)) 50% 30em/28em 6em; --shoulder--three: linear-gradient(var(--bear--one), var(--bear--one)) 50% 32em/32em 6em; --seat--one: linear-gradient(var(--car--seven), var(--car--seven)) 50% 28em/16em 10em; --seat--two: linear-gradient(var(--car--seven), var(--car--seven)) 50% 32em/20em 10em; --seat--three: linear-gradient(var(--car--two), var(--car--two)) 50% 32em/12em 4em; --seat--four: linear-gradient(var(--car--one), var(--car--one)) 50% 34em/20em 4em; --seat--five: linear-gradient(var(--car--five), var(--car--five)) 50% 36em/24em 12em; --seat--six: linear-gradient(var(--car--six), var(--car--six)) 50% 34em/32em 4em; --seat--seven: linear-gradient(var(--car--four), var(--car--four)) 12em 36em/4em 4em; --seat--eight: linear-gradient(var(--car--four), var(--car--four)) 40em 36em/4em 4em; --seat--nine: linear-gradient(var(--car--six), var(--car--six)) 50% 38em/28em 10em; --seat--ten: linear-gradient(var(--car--seven), var(--car--seven)) 50% 38em/20em 10e.........完整代码请登录后点击上方下载按钮下载查看
网友评论0