无div纯css实现一个行驶中汽车的动画效果代码
代码语言：html
所属分类：动画
代码描述：无div纯css实现一个行驶中汽车的动画效果代码
代码标签： css 实现 一个 行驶 中 汽车 的 动画 效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html{
box-sizing: border-box;
--black :#1a1c20 ;
--white : #fff ;
--green : #00c380 ;
--d-green : #019b66 ;
--gray : #c1c1c1 ;
--l-gray: #c4c4c4 ;
--m-gray : #373838 ;
--d-gray : #282724 ;
--d-blue: #202428 ;
--orange : #ef6206 ;
--yellow : #dfa500 ;
--l-yellow: #deb953;
--light: #fbfbfb ;
--n-road : -4em;
--p-road : 7em;
background-color: var(--green) ;
}
html *,
html *::before,
html *::after{
box-sizing: inherit ;
}
body::before,
body::after {
content: " " ;
position: absolute ;
}
body{
margin: 0 ;
height: 100vh ;
display: flex ;
overflow: hidden ;
position: relative ;
align-items: center ;
justify-content: center ;
background-repeat: no-repeat ;
background-color: var(--green) ;
animation: car 3.5s cubic-bezier(0.57, 0.63, 0.49, 0.65) infinite ;
background-image :
/* ===rubber-l */
radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%) ,
radial-gradient(circle at -24% 50%, var(--white) 31%, transparent 49%) ,
radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%) ,
radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%) ,
linear-gradient(var(--black) 100%, transparent 0) ,
/* rubber-l=== */
/* ===rubber-r */
radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%) ,
radial-gradient(circle at 124% 50%, var(--white) 31%, transparent 49%) ,
radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%) ,
radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%) ,
linear-gradient(var(--black) 100%, transparent 0) ,
/* rubber-r=== */
/* ===shadow */
linear-gradient( var(--d-green) 100% , transparent 0) ;
/* shadow=== */
background-size :
/* ===rubber-l */
2.5em 2.5em ,
0.7em 0.6em ,
2.5em .9em ,
2.5em .9em ,
1.95em 3.9em ,
/* rubber-l=== */
/* ===rubber-r */
2.5em 2.5em ,
0.7em 0.6em ,
2.5em .9em ,
2.5em .9em ,
1.95em 3.9em ,
/* rubber-r=== */
/* ===shadow */
13em .9em ;
/* shadow=== */
background-position :
/* ===rubber-l */
calc(50% - 6.4em) calc(50% - 1.7em) ,
calc(50% - 5.26em) calc(50% - -3.4em) ,
calc(50% - 6.5em) calc(50% - -3.8em) ,
calc(50% - 4.3em) calc(50% - -3.2em) ,
calc(50% - 6.58em) calc(50% - -1.5em) ,
/* rubber-l=== */
/* ===rubber-r */
calc(50% - -6.45em) calc(50% - 1.7em) ,
calc(50% - -5.26em) calc(50% - -3.4em) ,
calc(50% - -6.5em) calc(50% - -3.8em) ,
calc(50% - -4.3em) calc(50% - -3.2em) ,
calc(50% - -6.58em) calc(50% - -1.5em) ,
/* rubber-r=== */
/* ===shadow */
center calc(50% - -3.8em) ;
/* shadow=== */
}
body::before{
top: calc(50% - 26.2em) ;
width: 15.5em ;
height: 62.9em ;
background-size: 24.6% 491% ;
background-repeat: no-repeat ;
background-position: center 0 ;
animation: line 1.5s infinite linear, move-road 3.5s infinite linear ;
transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road) ,-11.975em, 0) ;
background-image: repeating-linear-gradient(to top, var(--white) , var(--white) 4.6%, transparent 0 , transparent 13.01%) ;
}
body::after{
width: 15.2em ;
height: 13.2em ;
top: calc(50% - 8.8em) ;
left:calc(50% - 7.55em) ;
background-repeat: no-repeat ;
animation: light 1s linear infinite, shake 3.5s linear infinite ;
background-image :
/* ===ceiling */
radial-gradient(58em 20em at 50% 215% , transparent 20% , var(--white) 20.5% , var(--white) 20.8% , var(--green) 21.5%) ,
/* ceiling=== */
/* ===antenna */
radial-gradient( circle at center 100% , var(--black) 30% , transparent 0) ,
/* antenna=== */
/* ===antenna */
linear-gradient(var(--white) 100% , transparent 0) ,
/* antenna=== */
/* ===glass-l */
radial-gradient( 17.8em 37em at 70% 240% , var(--black) 30% , transparent 30.5%) ,
/* glass-l=== */
/* ===glass-r */
radial-gradient( 17.8em 37em at 31% 240% , var(--black) 30% , transparent 30.5%) ,
/* glass-r=== */
/* ===light */
radial-gradient( circle , var(--light) 48% , var(--black) 52%, var(--black) 59% , transparent 62%) ,
/* light=== */
/* ===light */
radial-gradient( circle , var(--light) 48% , var(--black) 52%, var(--black) 59% , transparent 62%) ,
/* light=== */
/* ===hood-ro */
radial-gradient( 1em 1em at 102% 100% , var(--m-gray) 28%, #f3f3f3 30% ) ,
/* hood-ro=== */
/* ===hood-ro */
radial-gradient( 1em 1em at 97% -7% , var(--m-gray) 28%, var(--l-gray) 30% ) ,
/* hood-ro=== */
/* ===hood-ro */
radial-gradient( 1em 1em at -6% 102% , var(--m-gray) 28%, #efefef 30% ) ,
/* hood-ro=== */
/* ===hood-ro */
radial-gradient( 1em 1em at -6% -1% , var(--m-gray) 28%, var(--l-gray) 30% ) ,
/* hood-ro=== */
/* ===hood-f */
linear-gradient( to top , var(--m-gray) 50% , var(--d-gray) 0, var(--d-gray) 58% , var(--m-gray) 0) ,
/* hood-f=== */
/* ===hood-e */
linear-gradient( to top , var(--l-gray) 30% , var(--white) 100% , transparent 0) ,
/* hood-e=== */
/* ===hood-l */
radial-gradient( 16.4em 30.1em at 209% 333% , var(--white) 30% , transparent 30.2%) ,
/* hood-l=== */
/* ===hood-r */
radial-gradient( 16.4em 30.1em at -109% 333% , var(--white) 30% , transparent 30.2%) ,
/* hood-r=== */
/* ===hood-o */
linear-gradient( var(--gray) 100% , transparent 0) ,
/* hood-o=== */
/* ===hood */
linear-gradient( var(--white) 100% , transparent 0) ,
/* hood=== */
/* ===mirror */
radial-gradient( 6.7em 2.5em at 154% 8% , var(--black) 30% , transparent 33%) ,
/* mirror=== */
/* ===mirror */
radial-gradient( 6.7em 2.5em at -53% 8% , var(--black) 30% , transparent 33%) ,
/* mirror=== */
/* ===guide-l */
linear-gradient( var(--orange) 100% , transparent 0) ,
/* guide-l=== */
/* ===guide-r */
linear-gradient( var(--orange) 100% , transparent 0) ,
/* guide-r=== */
/* ===plaque */
linear-gradient( var(--yellow) 100% , transparent 0) ,
/* plaque=== */
/* ===plaque */
linear-gradient( var(--l-yellow) 100% , transparent 0) ,
/* plaque=== */
/* ===bumper */
linear-gradient( var(--d-blue) 100% , transparent 0) ,
/* bumper=== */
/* ===bumper-l */
radial-gradient( circle at 124% 39% , var(--d-blue) 60% , .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0