div+css实现6种滑板车炫酷动作动画效果代码-html代码-BFW代码库

div+css实现6种滑板车炫酷动作动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现6种滑板车炫酷动作动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Loved+by+the+King&display=swap');

:root {
	--cover: #333;
	--h: 8.5vmin;}

* {
	transform-style: preserve-3d;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1000vmin;
	font-size: 4vmin;
	font-family: "Coiny", serif;
	font-family: "Loved by the King", serif;
	background: radial-gradient(circle at 50% 50%, #a3a3a3, #000000) ;

}

.content {
	width: 50vmin;
	height: 50vmin;
	background: #f000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: tilt 0.2s linear 0s infinite;
	transform: rotateX(45deg) rotateZ(-25deg) scale3d(2, 2, 2) rotateX(-355deg) translateZ(0px);
}

@keyframes tilt {
	0% { transform: rotateX(45deg) rotateZ(-25deg) scale3d(2, 2, 2) rotateX(-355deg) translateZ(0px); }
	100% { transform: rotateX(45deg) rotateZ(-25deg) scale3d(2, 2, 2) rotateX(-355deg) translateZ(0.075vmin); }
}

.content:before {
	content: "";
	position: absolute;
	background: linear-gradient(90deg, #fff0 0 12vmin, #fff5d777 0 24vmin);
	width: 200vw;
	height: 3vmin;
	transform: translateZ(-4vmin);
	background-size: 24vmin 5vmin;
	background-repeat: repeat-x;
	background-position: 0 -5vmin;
	animation: lines 0.8s linear 0s infinite;
	top: -5vmin;
	filter: drop-shadow(0vmin 52vmin 0px #fff5d7);
}

@keyframes lines {
	0% { background-position: 0 0 }
	100% { background-position: -24vmin 0; }
}


.skate {
	display: flex;
	position: relative;
	transition: all 2s ease 0s;
}

.skate-shadow {
	background: #1c1c1c;
	transform: translateZ(-4.5vmin);
	width: 30vmin;
	height: 8vmin;
	position: absolute;
	border-radius: 10vmin;
	opacity: 0.5;
	filter: blur(2vmin);
}


.skate > div {
	position: relative;
}

.skate > div  span {
	width: 25vmin;
	height: var(--h);
	position: absolute;
	background-color: #ffbb00;
	transform: translateZ(-0.075vmin);
}
.skate > div span:nth-child(2) {
	transform: translateZ(-0.15vmin);
}
.skate > div span:nth-child(3) {
	transform: translateZ(-0.225vmin);
}
.skate > div span:nth-child(4) {
	transform: translateZ(-0.3vmin);
}
.skate > div span:nth-child(5) {
	transform: translateZ(-0.375vmin);
}
.skate > div span:nth-child(6) {
	transform: translateZ(-0.45vmin);
}
.skate > div span:nth-child(7) {
	transform: translateZ(-0.525vmin);
}
.skate > div span:nth-child(8) {
	transform: translateZ(-0.6vmin);
}
.skate > div span:nth-child(9) {
	transform: translateZ(-0.675vmin);
}
.skate > div span:nth-child(10) {
	transform: translateZ(-0.75vmin);
}

.skate > div span:nth-child(odd) {
	background: #b44800;
}

/* center */
.skate .center {
	background: 
		radial-gradient(circle at 96% 60%, #666 0.15vmin, #ffffff00 0.15vmin), 
		radial-gradient(circle at 96% 40%, #666 0.15vmin, #ffffff00 0.15vmin), 
		radial-gradient(circle at 88% 60%, #666 0.15vmin, #ffffff00 0.15vmin), 
		radial-gradient(circle at 88% 40%, #666 0.15vmin, #ffffff00 0.15vmin), 
		radial-gradient(circle at 4% 60%, #666 0.15vmin, #ffffff00 0.15vmin), 
		radial-gradient(circle at 4% 40%, #666 0.15vmin, #ffffff00 0.15vmin), 
		radial-gradient(circle at 12% 60%, #666 0.15vmin, #ffffff00 0.15vmin), 
		radial-gradient(circle at 12% 40%, #666 0.15vmin, #ffffff00 0.15vmin),  
		var(--co.........完整代码请登录后点击上方下载按钮下载查看