前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >CSS卡通小汽车

CSS卡通小汽车

作者头像
我不是费圆
发布于 2020-12-17 11:21:53
4660
发布于 2020-12-17 11:21:53
举报
文章被收录于专栏：鲸鱼动画
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>CodePen - CSS ART - Vintage VW Bug -</title>
		<style>
			:root {
				--size: 60;
				--unit: calc((var(--size) / 800) * 1vmin);
			}

			* {
				box-sizing: border-box;
			}

			body,
			html {
				width: 100%;
				height: 100%;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #ccdde2;
			}

			.base .whole .bug {
				width: calc(800 * var(--unit));
				height: calc(350 * var(--unit));
				position: relative;
			}

			.base .whole .bug__tire__shadow__ground {
				position: absolute;
				right: 5%;
				bottom: 0%;
				width: 30%;
				height: 5%;
				background: #000;
				border-radius: 100%;
				background: radial-gradient(#2f494f 0% 50%, transparent), radial-gradient(#2f494f 0% 30%, transparent), radial-gradient(#2f494f 0% 20%, transparent);
				filter: blur(3px);
			}

			.base .whole .bug__tire__shadow__ground:nth-child(2n) {
				left: 1%;
			}

			.base .whole .bug__whole__shadow {
				position: absolute;
				right: -2%;
				bottom: -3%;
				width: 105%;
				height: 8%;
				background: #000;
				border-radius: 100%;
				background: radial-gradient(#2f494f 0% 50%, transparent), radial-gradient(#2f494f 0% 30%, transparent);
				filter: blur(4px);
			}

			.base .whole .bug__body__b__back {
				position: absolute;
				right: 0;
				width: 69%;
				height: 84%;
				background: #b6d4de;
				border-radius: 20% 65% 0% 0% / 8% 100% 0% 0%;
				background-image: linear-gradient(#daeef5, #b6d4de 2% 7%, #6d929a 20% 50%, #527c88 60% 76%, #6d929a 80% 100%);
				box-shadow: -3px 1px 1px 2px #daeef5 inset, -7px 3px 4px 2px #b6d4de inset;
				overflow: hidden;
			}

			.base .whole .bug__body__b__back .engineroom {
				position: absolute;
				left: 85%;
				top: 30%;
				width: 20%;
				height: 50%;
				transform: rotate(-50deg);
				border: calc(1 * var(--unit)) solid #1c2a37;
				border-radius: 25% 25% 0% 0% / 25% 25% 0% 0%;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.base .whole .bug__body__b__back .engineroom .engine__lines {
				width: 60%;
				height: 60%;
				display: flex;
				justify-content: start;
				flex-direction: column;
			}

			.base .whole .bug__body__b__back .engineroom .engine__lines .engine__line {
				width: 100%;
				height: 7%;
				border-top: calc(1 * var(--unit)) solid #1c2a37;
			}

			.base .whole .bug__body__b__back .window__back__w {
				position: absolute;
				left: 66%;
				top: -19%;
				width: 20%;
				height: 55%;
				transform: rotate(-50deg);
				background: #ccdde2;
				border: calc(2 * var(--unit)) solid #000;
				border-radius: 100% 100% 30% 30% / 100% 100% 30% 30%;
				overflow: hidden;
			}

			.base .whole .bug__body__b__back .window__back__w::after {
				content: "";
				position: absolute;
				left: 0%;
				top: 0%;
				width: 23%;
				height: 100%;
				transform: rotate(-4deg);
				box-shadow: -5px 4px 2px 2px #daeef5 inset;
			}

			.base .whole .bug__body__b__back .window__back__w .window__back__w__inner {
				position: absolute;
				left: -20%;
				bottom: -5%;
				width: 50%;
				height: 15%;
				transform: rotate(40deg);
				background-color: #000;
			}

			.base .whole .bug__body__b__top {
				position: absolute;
				right: 0;
				width: 69%;
				height: 84%;
				background-color: transparent;
				border-radius: 20% 65% 0% 0% / 8% 100% 0% 0%;
			}

			.base .whole .bug__body__f {
				position: absolute;
				left: 0;
				top: 31%;
				width: 39%;
				height: 53%;
				background: #b6d4de;
				border-radius: 100% 25% 0% 20% / 100% 25% 0% 20%;
				background-image: linear-gradient(#b6d4de, #6d929a 5% 23%, #527c88 35% 62%, #6d929a 68% 100%);
				box-shadow: 0px 1px 2px 2px #daeef5 inset, 0px 4px 5px 3px #b6d4de inset;
				overflow: hidden;
			}

			.base .whole .bug__body__f .bug__body__hood {
				position: absolute;
				right: 40%;
				top: -35%;
				width: 27%;
				height: 56%;
				border-right: calc(1 * var(--unit)) solid #1c2a37;
				border-radius: 0% 49% 42% 0% / 0% 49% 42% 0%;
			}

			.base .whole .bug__body__f .bug__body__hood2 {
				position: absolute;
				right: 43%;
				top: 37%;
				width: 77%;
				height: 23%;
				border-top: calc(1 * var(--unit)) solid #1c2a37;
				border-radius: 0% 49% 42% 0% / 0% 49% 42% 0%;
				transform: rotate(-25deg);
			}

			.base .whole .bug__body__w {
				position: absolute;
				left: 27%;
				top: 7%;
				width: 10%;
				height: 40%;
				background: #b6d4de;
				transform: rotate(-332.944deg);
			}

			.base .whole .bug .window__back {
				position: absolute;
				left: 33%;
				top: 12%;
				width: 32%;
				height: 30%;
				background: #000;
				border-radius: 5% 100% 17% 6% / 8% 88% 21% 9%;
			}

			.base .whole .bug .window__f__h {
				position: absolute;
				left: -5%;
				top: 5%;
				width: 4%;
				height: 40%;
				transform: rotate(-332.944deg);
				background-image: linear-gradient(332.944deg, transparent, #6d929a 20% 75%, transparent 90% 100%);
				box-shadow: 1px 5px 3px 1px #b6d4de inset;
			}

			.base .whole .bug .window__f {
				position: absolute;
				left: -5%;
				top: 12%;
				width: 33%;
				height: 30%;
				background: #000;
				border-radius: 67% 4% 9% 6% / 50% 7% 11% 9%;
				overflow: hidden;
			}

			.base .whole .bug .window__f__inner {
				position: absolute;
				right: 0%;
				bottom: 0%;
				width: 90%;
				height: 90%;
				background: #ccdde2;
				border-radius: 67% 4% 9% 6% / 40% 7% 11% 9%;
			}

			.base .whole .bug .window__f__h__inner {
				position: absolute;
				left: 9%;
				top: -3%;
				width: 10%;
				height: 100%;
				background: #000;
				transform: rotate(-332.944deg);
			}

			.base .whole .bug .window__f__stick {
				position: absolute;
				left: 40%;
				top: 0%;
				width: 3%;
				height: 130%;
				background: #000;
				transform: rotate(15deg);
			}

			.base .whole .bug .window__f__stick:nth-child(2n) {
				left: 34%;
			}

			.base .whole .bug .window__f__headrest {
				position: absolute;
				right: -3%;
				top: 20%;
				width: 15%;
				height: 50%;
				background: #000;
				transform: rotate(-10deg);
				border-radius: 100% 60% 44% 63% / 100% 60% 44% 63%;
			}

			.base .whole .bug .window__f__headrest__stick {
				position: absolute;
				right: 2%;
				bottom: 0%;
				width: 3%;
				height: 50%;
				background: #000;
				transform: rotate(15deg);
			}

			.base .whole .bug .window__f__headrest__btm {
				position: absolute;
				right: -10%;
				bottom: -30%;
				width: 30%;
				height: 50%;
				background: #000;
				transform: rotate(15deg);
				border-radius: 63% 14% 19% 0% / 63% 14% 19% 0%;
			}

			.base .whole .bug .window__f__handle {
				position: absolute;
				left: 0%;
				bottom: -30%;
				width: 20%;
				height: 50%;
				background: #121212;
				transform: rotate(-25deg);
				border-radius: 15% / 15%;
			}

			.base .whole .bug .window__b {
				position: absolute;
				left: 33%;
				top: 12%;
				width: 32%;
				height: 30%;
				background: #000;
				border-radius: 5% 100% 17% 6% / 8% 88% 21% 9%;
				overflow: hidden;
			}

			.base .whole .bug .window__b__inner {
				position: absolute;
				left: 5%;
				bottom: -2%;
				width: 82%;
				height: 90%;
				background: #ccdde2;
				border-radius: 5% 100% 17% 6% / 8% 88% 21% 9%;
			}

			.base .whole .bug .window__b__seat {
				position: absolute;
				right: 12%;
				bottom: -35%;
				width: 10%;
				height: 50%;
				background: #000;
				transform: rotate(15deg);
				border-radius: 63% 14% 19% 0% / 63% 14% 19% 0%;
			}

			.base .whole .bug .bug__headlight {
				position: absolute;
				left: 0%;
				top: 52%;
				width: 6%;
				height: 14%;
				background: red;
				border-radius: 36% 0% 0% 17% / 36% 0% 0% 17%;
				background-image: linear-gradient(0deg, #91a0a3 0% 35%, #010000 50% 60%, #91a0a3 75% 85%, #9da5a8 90% 100%);
			}

			.base .whole .bug .bug__fender__f {
				position: absolute;
				left: 0;
				top: 48%;
				width: 13%;
				height: 35%;
				background: #6d929a;
				border-radius: 49% 20% 0% 10% / 70% 20% 0% 10%;
				background-image: linear-gradient(#b6d4de, #6d929a, #527c88 40% 100%);
				box-shadow: 0px 2px 3px 2px #6d929a inset;
				overflow: hidden;
			}

			.base .whole .bug .bug__fender__f .bug__fender__shadow {
				position: absolute;
				left: 0%;
				bottom: 0%;
				width: 110%;
				height: 78%;
				background: #000;
				border-radius: 93% 0% 0% 0% / 100% 0% 0% 0%;
			}

			.base .whole .bug .bug__fender__b {
				position: absolute;
				left: 10%;
				top: 48%;
				width: 15%;
				height: 40%;
				background: #6d929a;
				border-radius: 0% 100% 0% 0% / 0% 100% 0% 0%;
				background-image: linear-gradient(#b6d4de, #6d929a, #527c88 35% 100%);
				box-shadow: -3px 3px 3px 1px #6d929a inset;
				overflow: hidden;
			}

			.base .whole .bug .bug__fender__b .bug__fender__shadow {
				position: absolute;
				left: 0%;
				bottom: 0%;
				width: 70%;
				height: 79%;
				background: #000;
				border-radius: 0% 100% 0% 0% / 0% 100% 0% 0%;
			}

			.base .whole .bug .bug__fender__b .bug__fender__shadow__box {
				position: absolute;
				right: 12%;
				bottom: 0%;
				width: 20%;
				height: 20%;
				background: #000;
			}

			.base .whole .bug .bug__fender__b .bug__fender__shadow__box .bug__fender__shadow__cir {
				position: absolute;
				right: 0%;
				bottom: 0%;
				width: 100%;
				height: 100%;
				background: #527c88;
				border-radius: 0% 0% 0% 100% / 0% 0% 0% 100%;
			}

			.base .whole .bug .bug__taillight {
				position: absolute;
				right: 1%;
				top: 55%;
				width: 6%;
				height: 14%;
				background: white;
				border-radius: 0% 22% 17% 0% / 0% 22% 17% 0%;
				background-image: linear-gradient(0deg, #1f0a1b 0% 50%, #c19b6a 70% 80%, #c8b5b1 90% 100%);
			}

			.base .whole .bug .bug__fender__bb {
				position: absolute;
				right: 0%;
				top: 49%;
				width: 20%;
				height: 35%;
				background: #6d929a;
				border-radius: 100% 20% 0% 10% / 100% 20% 0% 0%;
				transform: rotateY(180deg);
				background-image: linear-gradient(#b6d4de, #6d929a, #527c88 35% 100%);
				box-shadow: 2px 2px 3px 2px #6d929a inset;
				overflow: hidden;
			}

			.base .whole .bug .bug__fender__bb .bug__fender__shadow {
				position: absolute;
				right: 0%;
				bottom: 0%;
				width: 72%;
				height: 77%;
				background: #000;
				border-radius: 93% 0% 0% 0% / 100% 0% 0% 0%;
			}

			.base .whole .bug .bug__fender__bb .bug__fender__shadow__box {
				position: absolute;
				left: 12%;
				bottom: 0%;
				width: 20%;
				height: 32%;
				background: #000;
			}

			.base .whole .bug .bug__fender__bb .bug__fender__shadow__box .bug__fender__shadow__cir {
				position: absolute;
				right: 0%;
				bottom: 0%;
				width: 100%;
				height: 100%;
				background: #527c88;
				border-radius: 0% 0% 100% 0% / 0% 0% 100% 0%;
			}

			.base .whole .bug .bug__fender__fb {
				position: absolute;
				right: 16%;
				top: 49%;
				width: 15%;
				height: 40%;
				background: #6d929a;
				border-radius: 0% 100% 0% 0% / 0% 100% 0% 0%;
				transform: rotateY(180deg);
				background-image: linear-gradient(#b6d4de, #6d929a, #527c88 31% 100%);
				box-shadow: -4px 0px 3px 3px #6d929a inset;
				overflow: hidden;
			}

			.base .whole .bug .bug__fender__fb .bug__fender__shadow {
				position: absolute;
				left: 0%;
				bottom: 0%;
				width: 70%;
				height: 78%;
				background: #000;
				border-radius: 0% 100% 0% 0% / 0% 100% 0% 0%;
			}

			.base .whole .bug .bug__fender__fb .bug__fender__shadow__box {
				position: absolute;
				right: 12%;
				bottom: 0%;
				width: 20%;
				height: 20%;
				background: #000;
			}

			.base .whole .bug .bug__fender__fb .bug__fender__shadow__box .bug__fender__shadow__cir {
				position: absolute;
				right: 0%;
				bottom: 0%;
				width: 100%;
				height: 100%;
				background: #527c88;
				border-radius: 0% 0% 0% 100% / 0% 0% 0% 100%;
			}

			.base .whole .bug .bug__tire__shadow {
				position: absolute;
				left: 6%;
				bottom: 2%;
				width: calc(140 * var(--unit));
				height: calc(140 * var(--unit));
				background: #000;
				border-radius: 100%;
			}

			.base .whole .bug .bug__tire__shadow:nth-child(2n) {
				left: 70%;
			}

			.base .whole .bug .bug__tire {
				position: absolute;
				left: 2%;
				bottom: 0%;
				width: calc(140 * var(--unit));
				height: calc(140 * var(--unit));
				background: #000;
				border-radius: 100%;
			}

			.base .whole .bug .bug__tire:nth-child(2n) {
				left: 75%;
			}

			.base .whole .bug .bug__tire__white {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
				height: 80%;
				background: #d2dbdb;
				border-radius: 100%;
			}

			.base .whole .bug .bug__tire__blue {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
				height: 80%;
				background: #688990;
				border-radius: 100%;
			}

			.base .whole .bug .bug__tire__blue::before {
				content: "";
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
				height: 80%;
				background: #53676e;
				border-radius: 100%;
			}

			.base .whole .bug .bug__tire__blue__dots {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
				height: 80%;
				border: calc(10 * var(--unit)) #121212 dotted;
				border-radius: 100%;
			}

			.base .whole .bug .bug__tire__wheel {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 67%;
				height: 67%;
				background: white;
				border-radius: 100%;
				background-image: linear-gradient(180deg, #010101 0% 40%, #bac7cd 55% 100%);
			}

			.base .whole .bug .bug__tire__wheel__logo {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 50%;
				height: 50%;
				background: #bac7cd;
				border-radius: 100%;
				box-shadow: 0px -1px 1px 0px #010101 inset, 0px 1px 1px 0px #bac7cd inset;
			}

			.base .whole .bug .bug__step {
				position: absolute;
				left: 23%;
				top: 85%;
				width: 47%;
				height: 4%;
				background: #bac7cd;
				border-radius: 10px 10px 0 0 / 10px 10px 0 0;
				box-shadow: -2px 0px 2px 1px #121212 inset;
			}

			.base .whole .bug .bug__step::after {
				content: "";
				position: absolute;
				width: 100%;
				top: 50%;
				border-top: calc(4 * var(--unit)) #121212 solid;
			}

			.base .whole .bug .bug__step__shadow {
				position: absolute;
				left: 23%;
				top: 82%;
				width: 47%;
				height: 4%;
				background: #121212;
				border-radius: 0 0 10px 10px/ 0 0 10px 10px;
			}

			.base .whole .bug .bug__handle {
				position: absolute;
				left: 45%;
				top: 42%;
				width: 5%;
				height: 5%;
			}

			.base .whole .bug .bug__handle__shadow {
				position: absolute;
				left: 20%;
				top: -17%;
				width: 60%;
				height: 100%;
				background: linear-gradient(#527c88 0% 50%, #b6d4de 60% 100%);
				border-radius: 100% 63% 53% 82% / 100% 63% 53% 82%;
			}

			.base .whole .bug .bug__handle__handle {
				position: absolute;
				left: 0%;
				top: 10%;
				width: 100%;
				height: 40%;
				background: #d2dbdb;
				border-radius: 100% 75% 75% 100% / 100% 75% 75% 100%;
				box-shadow: 0px -1px 1px 0px #010101 inset;
			}

			.base .whole .bug .bug__door {
				position: absolute;
				left: 25%;
				top: 7%;
				width: 27%;
				height: 75%;
			}

			.base .whole .bug .bug__door__line__right {
				position: absolute;
				right: 0%;
				top: 0%;
				width: 80%;
				height: 100%;
				border-right: 1px solid #1c2a37;
				border-top: 1px solid #1c2a37;
				border-radius: 100% 100% 0% 0% / 25% 0% 0% 0%;
			}

			.base .whole .bug .bug__door__line__left__btm {
				position: absolute;
				left: 0%;
				bottom: 0%;
				width: 0%;
				height: 57%;
				border-right: 1px solid #1c2a37;
			}

			.base .whole .bug .bug__door__line__left__top {
				position: absolute;
				left: 10%;
				top: 7%;
				width: 0%;
				height: 37%;
				transform: rotate(-332.944deg);
				border-right: 1px solid #1c2a37;
			}

			.base .whole .bug .bug__door__box {
				position: absolute;
				left: -2%;
				top: 42%;
				width: 5%;
				height: 7%;
				background: #000;
				background: linear-gradient(90deg, #6d929a, #527c88);
			}

			.base .whole .bug .bug__door__box:nth-child(2n) {
				top: 87%;
			}

			.base .whole .bug .bug__longline {
				position: absolute;
				left: 3%;
				top: 40%;
				width: 84%;
				height: 40%;
				border-top: calc(1 * var(--unit)) #b6d4de solid;
				border-radius: 100% 75% 75% 100% / 100% 75% 75% 100%;
				box-shadow: 0px 1px 1px 1px #b6d4de inset, 0px 2px 2px 1px #b6d4de inset;
			}

			.base .whole .bug .bug__door__line__back {
				position: absolute;
				left: 40%;
				top: 7%;
				width: 50%;
				height: 65%;
				border-top: calc(1 * var(--unit)) #1c2a37 solid;
				border-radius: 0% 72% 0% 0% / 0% 100% 0% 0%;
			}

			.base .whole .bug .bug__bumper__back {
				position: absolute;
				right: -4%;
				top: 73%;
				width: 6%;
				height: 8%;
				background: #7d8987;
				border-radius: 0% 10% 10% 30% / 0% 9% 15% 99%;
				box-shadow: 0px 3px 3px 1px #daeef5 inset, -4px 0px 1px 0px #2f494f;
				overflow: hidden;
			}

			.base .whole .bug .bug__bumper__back::after {
				content: "";
				position: absolute;
				right: 0%;
				top: 25%;
				width: 100%;
				height: 50%;
				background: #010000;
			}

			.base .whole .bug .bug__bumper__front {
				position: absolute;
				left: -3%;
				top: 73%;
				width: 3%;
				height: 8%;
				background: #7d8987;
				border-radius: 0% 10% 10% 30% / 0% 9% 15% 99%;
				box-shadow: 0px 3px 3px 1px #daeef5 inset, -4px 0px 1px 0px #2f494f;
				transform: rotateY(180deg);
				overflow: hidden;
			}

			.base .whole .bug .bug__bumper__front::after {
				content: "";
				position: absolute;
				right: 0%;
				top: 25%;
				width: 100%;
				height: 50%;
				background: #010000;
			}

			.base .whole .bug .bug__ex {
				position: absolute;
				right: -2%;
				top: 80%;
				width: 5%;
				height: 5%;
				background: #7d8987;
				transform: skewX(-20deg) rotate(10deg);
				box-shadow: 0px 3px 3px 1px #daeef5 inset;
			}

			.base .whole .bug .bug__handle__back {
				position: absolute;
				right: 2%;
				top: 45%;
				width: 5%;
				height: 4%;
				background: #daeef5;
				transform: skewX(20deg);
				border-radius: 20%;
				box-shadow: 1px -3px 2px 1px #6d929a inset;
			}
		</style>
	</head>
	<body>

		<div class="base">
			<div class="whole">
				<div class="bug">
					<div class="bug__whole__shadow"></div>
					<div class="bug__tire__shadow__ground"></div>
					<div class="bug__tire__shadow__ground"></div>
					<div class="bug__tire__shadow"></div>
					<div class="bug__tire__shadow"></div>
					<div class="bug__ex"></div>
					<div class="bug__handle__back"></div>
					<div class="bug__body__w"></div>
					<div class="bug__body__f">
						<div class="bug__body__hood"></div>
						<div class="bug__body__hood2"></div>
					</div>
					<div class="bug__body__b__back">
						<div class="engineroom">
							<div class="engine__lines">
								<div class="engine__line"></div>
								<div class="engine__line"></div>
								<div class="engine__line"></div>
								<div class="engine__line"></div>
								<div class="engine__line"></div>
								<div class="engine__line"></div>
							</div>
						</div>
						<div class="window__back__w">
							<div class="window__back__w__inner"></div>
						</div>
					</div>
					<div class="bug__body__b__top">
						<div class="window__f">
							<div class="window__f__inner"></div>
							<div class="window__f__h__inner"></div>
							<div class="window__f__stick"></div>
							<div class="window__f__stick"></div>
							<div class="window__f__headrest"></div>
							<div class="window__f__headrest__stick"></div>
							<div class="window__f__headrest__btm"></div>
							<div class="window__f__handle"></div>
						</div>
						<div class="window__f__h"></div>
						<div class="window__b">
							<div class="window__b__inner"></div>
							<div class="window__b__seat"></div>
						</div>
					</div>
					<div class="bug__longline"></div>
					<div class="bug__door__line__back"></div>
					<div class="bug__door">
						<div class="bug__door__line__right"></div>
						<div class="bug__door__line__left__btm"></div>
						<div class="bug__door__line__left__top"></div>
						<div class="bug__door__box"></div>
						<div class="bug__door__box"></div>
					</div>
					<div class="bug__step__shadow"></div>
					<div class="bug__headlight"></div>
					<div class="bug__fender__f">
						<div class="bug__fender__shadow"></div>
					</div>
					<div class="bug__fender__b">
						<div class="bug__fender__shadow"></div>
						<div class="bug__fender__shadow__box">
							<div class="bug__fender__shadow__cir"></div>
						</div>
					</div>
					<div class="bug__taillight"></div>
					<div class="bug__fender__bb">
						<div class="bug__fender__shadow"></div>
						<div class="bug__fender__shadow__box">
							<div class="bug__fender__shadow__cir"></div>
						</div>
					</div>
					<div class="bug__fender__fb">
						<div class="bug__fender__shadow"></div>
						<div class="bug__fender__shadow__box">
							<div class="bug__fender__shadow__cir"></div>
						</div>
					</div>
					<div class="bug__handle">
						<div class="bug__handle__shadow"></div>
						<div class="bug__handle__handle"></div>
					</div>
					<div class="bug__tire">
						<div class="bug__tire__white">
							<div class="bug__tire__blue">
								<div class="bug__tire__blue__dots"></div>
								<div class="bug__tire__wheel">
									<div class="bug__tire__wheel__logo"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="bug__tire">
						<div class="bug__tire__white">
							<div class="bug__tire__blue">
								<div class="bug__tire__blue__dots"></div>
								<div class="bug__tire__wheel">
									<div class="bug__tire__wheel__logo"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="bug__step"> </div>
					<div class="bug__bumper__back"></div>
					<div class="bug__bumper__front"></div>
				</div>
			</div>
		</div>

	</body>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/11/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2024 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论