div+css布局实现一个摇摆颤动的汽车动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css布局实现一个摇摆颤动的汽车动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/***********************/
/***********************/
/***********************/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
user-select: none;
-webkit-tap-highlight-color: transparent;
appearance: none;
font-family: sans-serif;
}
/***********************/
/***********************/
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
overflow: hidden;
background-color: #76b9e9;
}
.face {
position: absolute;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
/***********************/
/***********************/
.main {
width: 20vmin;
height: 40vmin;
transform: perspective(30000px) scale(1.2) rotateX(55deg) rotateZ(35deg) translateZ(-10vmin);
transition: 100ms linear;
cursor: grab;
}
.shake {
width: 100%;
height: 100%;
animation: shake 2500ms cubic-bezier(0.17, 0.67, 0.52, 0.94) infinite;
}
.truck {
position: absolute;
width: 20vmin;
height: 40vmin;
animation: truck 1000ms cubic-bezier(0.17, 0.67, 0.52, 0.94) infinite;
}
.shadows {
position: absolute;
width: 20vmin;
height: 40vmin;
}
.shadow {
position: absolute;
height: 100%;
transform-origin: bottom left;
box-shadow: 0 0 1vmin #518bb5;
}
.shadow-1 {
width: 50%;
left: 100%;
transform: skewY(-15deg);
background-color: #518bb5;
filter: blur(0.35vmin);
}
.shadow-2 {
width: 150%;
transform: skewY(-15deg);
background-color: #518bb5;
filter: blur(0.35vmin);
}
.shadow-3 {
width: 100%;
background-image: linear-gradient(to right, rgba(71, 126, 166, 0.85), rgba(48, 85, 112, 0.85), rgba(55, 99, 130, 0.85));
filter: blur(0.5vmin);
}
/***********************/
/***********************/
.a0 {
width: 20vmin;
height: 1.5vmin;
position: absolute;
top: -1.5vmin;
left: 0;
transform: translateZ(2.75vmin) rotateX(25deg);
}
.a0__front {
width: 20vmin;
height: 3vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-1.5vmin);
}
.a0__back {
width: 20vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-20vmin) translateY(-3vmin);
}
.a0__right {
width: 1.5vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(20vmin) translateX(-1.5vmin) translateY(-3vmin);
}
.a0__left {
width: 1.5vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vmin);
}
.a0__top {
width: 20vmin;
height: 1.5vmin;
transform-origin: top left;
transform: translateZ(3vmin);
}
.a0__bottom {
width: 20vmin;
height: 1.5vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-20vmin);
}
.a0__front {
background-color: #ded6b7;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 2.5vmin;
}
.a0__front .f-light {
position: relative;
width: 1vmin;
height: 1vmin;
background-color: #b12400;
border-radius: 50%;
}
.a0__back {
background-color: #999173;
}
.a0__right {
background-color: #a39d82;
}
.a0__left {
background-color: #e6e0c9;
}
.a0__top {
background-color: #aea890;
}
.a0__bottom {
background-color: #535149;
}
.a1 {
width: 20vmin;
height: 2vmin;
position: absolute;
bottom: 0;
left: 0;
transform: translateZ(2vmin);
}
.a1__front {
width: 20vmin;
height: 3vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-1vmin);
}
.a1__back {
width: 20vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-20vmin) translateY(-3vmin);
}
.a1__right {
width: 2vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(20vmin) translateX(-2vmin) translateY(-3vmin);
}
.a1__left {
width: 2vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vmin);
}
.a1__top {
width: 20vmin;
height: 2vmin;
transform-origin: top left;
transform: translateZ(3vmin);
}
.a1__bottom {
width: 20vmin;
height: 2vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-20vmin);
}
.a1__front {
background-color: #eeeada;
}
.a1__front-a {
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
width: 100%;
height: 3.275vmin;
padding: 1vmin 2.5vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-image: linear-gradient(to bottom, #d6cfb0, #cec49f);
}
.a1__front-a .f-light {
position: relative;
width: 1.15vmin;
height: 1.15vmin;
background-color: #cd4d2c;
border-radius: 50%;
}
.a1__back::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3.275vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-color: #535149;
}
.a1__right {
background-color: #999173;
}
.a1__right::before {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(-65deg, transparent 1.6vmin, #999173 1.6vmin);
}
.a1__right::after {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(65deg, transparent 1.6vmin, #999173 1.6vmin);
}
.a1__left {
background-color: #e6e0c9;
}
.a1__left::before {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(65deg, transparent 1.6vmin, #e6e0c9 1.6vmin);
}
.a1__left::after {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(-65deg, transparent 1.6vmin, #e6e0c9 1.6vmin);
}
.a1__top {
background-color: #dfd9c1;
top: -1.35vmin;
height: 3.35vmin;
}
.a1__bottom {
background-color: #535149;
}
.a2 {
width: 20vmin;
height: 16vmin;
position: absolute;
bottom: 9vmin;
left: 0;
transform: translateZ(2vmin);
}
.a2__front {
width: 20vmin;
height: 3vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(13vmin);
}
.a2__back {
width: 20vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-20vmin) translateY(-3vmin);
}
.a2__right {
width: 16vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(20vmin) translateX(-16vmin) translateY(-3vmin);
}
.a2__left {
width: 16vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vmin);
}
.a2__top {
width: 20vmin;
height: 16vmin;
transform-origin: top left;
transform: translateZ(3vmin);
}
.a2__bottom {
width: 20vmin;
height: 16vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-20vmin);
}
.a2__front {
background-color: #eeeada;
}
.a2__front::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3.275vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-color: #535149;
}
.a2__back {
background-color: #b9b49f;
}
.a2__back::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3.275vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-color: #535149;
}
.a2__right {
background-color: #999173;
}
.a2__right::before {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(65deg, transparent 1.6vmin, #999173 1.6vmin);
}
.a2__right::after {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(-65deg, transparent 1.6vmin, #999173 1.6vmin);
}
.a2__left {
background-color: #e6e0c9;
}
.a2__left::before {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(65deg, transparent 1.6vmin, #e6e0c9 1.6vmin);
}
.a2__left::after {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(-65deg, transparent 1.6vmin, #e6e0c9 1.6vmin);
}
.a2__top {
background-color: #dfd9c1;
top: -1.35vmin;
height: 18.75vmin;
}
.a2__bottom {
background-color: #535149;
}
.a3 {
width: 20vmin;
height: 8vmin;
position: absolute;
bottom: 32vmin;
left: 0;
transform: translateZ(2vmin);
}
.a3__front {
width: 20vmin;
height: 3vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(5vmin);
}
.a3__back {
width: 20vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-20vmin) translateY(-3vmin);
}
.a3__right {
width: 8vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(20vmin) translateX(-8vmin) translateY(-3vmin);
}
.a3__left {
width: 8vmin;
height: 3vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vmin);
}
.a3__top {
width: 20vmin;
height: 8vmin;
transform-origin: top left;
transform: translateZ(3vmin);
}
.a3__bottom {
width: 20vmin;
height: 8vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-20vmin);
}
.a3__front {
background-color: #eeeada;
}
.a3__front::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3.275vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-color: #535149;
}
.a3__back::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 3.5vmin;
transform-origin: bottom;
transform: rotateX(-25deg);
background-color: #7d775b;
}
.a3__right {
background-color: #999173;
}
.a3__right::before {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(65deg, transparent 1.6vmin, #999173 1.6vmin);
}
.a3__right::after {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(-65deg, transparent 1.6vmin, #999173 1.6vmin);
}
.a3__left {
background-color: #e6e0c9;
}
.a3__left::before {
content: "";
position: absolute;
right: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(-65deg, transparent 1.6vmin, #e6e0c9 1.6vmin);
}
.a3__left::after {
content: "";
position: absolute;
left: -1.75vmin;
width: 1.75vmin;
height: 100%;
background-image: linear-gradient(65deg, transparent 1.6vmin, #e6e0c9 1.6vmin);
}
.a3__top {
background-color: #dfd9c1;
bottom: -1.35vmin;
height: 9.35vmin;
}
.a3__bottom {
background-color: #535149;
}
.wheel-a,
.wheel-b,
.wheel-c,
.wheel-d {
position: absolute;
bottom: 2.75vmin;
left: -4.5vmin;
height: 5vmin;
width: 5vmin;
transform-origin: bottom right;
transform: rotateY(90deg);
}
.wheel-a .circle,
.wheel-b .circle,
.wheel-c .circle,
.wheel-d .circle {
width: 2vmin;
height: 2vmin;
border-radius: 50%;
}
.wheel-a .circle-a,
.wheel-b .circle-a,
.wheel-c .circle-a,
.wheel-d .circle-a {
position: absolute;
width: 2vmin;
height: 5vmin;
transform: rotateY(90deg) translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.wheel-a .circle-a__side,
.wheel-b .circle-a__side,
.wheel-c .circle-a__side,
.wheel-d .circle-a__side {
position: absolute;
height: 0.4861111111vmin;
width: 2vmin;
background-color: black;
}
.wheel-a .circle-a__side:nth-of-type(1),
.wheel-b .circle-a__side:nth-of-type(1),
.wheel-c .circle-a__side:nth-of-type(1),
.wheel-d .circle-a__side:nth-of-type(1) {
transform: rotateX(10deg) translateZ(2.5vmin);
}
.wheel-a .circle-a__side:nth-of-type(2),
.wheel-b .circle-a__side:nth-of-type(2),
.wheel-c .circle-a__side:nth-of-type(2),
.wheel-d .circle-a__side:nth-of-type(2) {
transform: rotateX(20deg) translateZ(2.5vmin);
}
.wheel-a .circle-a__side:nth-of-type(3),
.wheel-b .circle-a__side:nth-of-type(3),
.wheel-c .circle-a__side:nth-of-type(3),
.wheel-d .circle-a__side:nth-of-type(3) {
transform: rotateX(30deg) translateZ(2.5vmin);
}
.wheel-a .circle-a__side:nth-of-type(4),
.wheel-b .circle-a__side:nth-of-type(4),
.wheel-c .circle-a__side:nth-of-type(4),
.wheel-d .circle-a__side:nth-of-type(4) {
transform: rotateX(40deg) translateZ(2.5vmin);
}
.wheel-a .circle-a__side:nth-of-type(5),
.wheel-b .circle-a__side:nth-of-type(5),
.wheel-c .circle-a__side:nth-of-type(5),
.wheel-d .circle-a__side:nth-of-type(5) {
transform: rotateX(50deg) translateZ(2.5vmin);
}
.wheel-a .circle-a__side:nth-of-type(6),
.wheel-b .circle-a__side:nth-of-type(6),
.wheel-c .c.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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