驶入2023
马上进入2023年了,这一年我们经历了很多有酸甜苦辣,但是并不妨碍我们用崭新的自己来面对新的一年,偶然在网上看到一位大佬用css做了一辆喜庆的车车来让人们驶入2023
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Menlo;
/* 解决手机浏览器点击有选框的问题 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
min-height: 100vh;
background-color: #fff;
}
/* 公路 */
.road {
display: flex;
justify-content: center;
align-items: center;
width: 700px;
height: 200px;
background-color: #333;
border-radius: 75px;
/* 表示所有子元素在3D空间中呈现 */
transform-style: preserve-3d;
/* 用上帝视角看该元素 */
perspective: 500px;
position: relative;
}
/* 虚线 */
.road::before {
content: "";
position: absolute;
width: 100%;
height: 4px;
background: linear-gradient(90deg,
#fff,
#fff 50%,
transparent 50%,
transparent 100%);
background-size: 50px;
animation: animate-road 0.1s linear infinite;
}
/* 路面运动 */
@keyframes animate-road {
0% {
background-position: 50px 0;
}
100% {
background-position: 0 0;
}
}
/* 车 */
.car {
position: absolute;
left: 50px;
z-index: 10;
width: 200px;
height: 80px;
/* background-color: #f4b603; */
background-color: #e72b25;
border-radius: 10px;
box-shadow: -10px 10px rgba(0, 0, 0, 0.2);
/* 表示所有子元素在3D空间中呈现 */
transform-style: preserve-3d;
perspective: 800px;
}
.car:nth-child(1) {
animation: animate-car 6s;
animation-fill-mode: forwards;
}
.car:nth-child(2) {
left: initial;
right: 150px;
z-index: 9;
/* animation: animate-car 4s linear infinite; */
/* 开启动画 */
animation: animate-car-two 6s;
/* animation-delay: 1s; */
/* 保持动画结束后位置 */
animation-fill-mode: forwards;
}
/* 出租车移动动画 */
@keyframes animate-car {
0% {
transform: translate(0px, 0px);
}
25% {
transform: translate(0px, -50px);
}
75% {
transform: translate(300px, -50px);
}
100% {
transform: translate(300px, 0px);
}
}
@keyframes animate-car-two {
0% {
transform: translate(0px, 0px);
}
25% {
transform: translate(0px, 50px);
}
75% {
transform: translate(-300px, 50px);
}
100% {
transform: translate(-300px, 0px);
}
}
/* 尾灯 */
.car::before {
position: absolute;
top: 12px;
left: 2px;
content: "";
width: 5px;
height: 15px;
background-color: #fdd206;
border-radius: 2px;
box-shadow: 0 42px #fdd206;
}
/* 前大灯 */
.car::after {
position: absolute;
top: 10px;
right: 2px;
content: "";
width: 5px;
height: 16px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 44px #fff;
}
/* 车顶前后盖 */
.car .top {
position: absolute;
inset: 5px 10px;
background-color: #fe453d;
border-radius: 10px;
overflow: hidden;
}
/* 车顶文字 */
.car .top::before {
position: absolute;
top: 50%;
left: 50%;
content: "2023";
color: red;
background-color: #fff;
padding: 2px;
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
box-shadow: 0 0 0 1px #0005;
transform: translate(-50%, -50%) rotate(90deg);
z-index: 10;
}
.car:nth-child(2) .top::before {
content: "2022";
}
/* 车窗 */
.car .top b {
position: absolute;
inset: 0 30px;
background-color: #111;
border-radius: 10px;
}
/* 车顶 */
.car .top b::before {
position: absolute;
content: "";
inset: 6px 25px;
background-color: #fe453d;
border-radius: 5px;
}
/* 车顶中间横杠 */
.car .top b::after {
position: absolute;
content: "";
inset: 0 58px;
background-color: #fe453d;
}
/* 斜杠 */
.car .top i {
position: absolute;
inset: 0;
}
/* 斜杠 */
.car .top i::before {
position: absolute;
top: 7px;
left: 20px;
content: "";
width: 40px;
height: 5px;
background-color: #fe453d;
transform-origin: right;
transform: rotate(15deg);
box-shadow: 100px 34px #fe453d;
}
/* 斜杠 */
.car .top i::after {
position: absolute;
bottom: 7px;
left: 20px;
content: "";
width: 40px;
height: 5px;
background-color: #fe453d;
transform-origin: right;
transform: rotate(-15deg);
box-shadow: 100px -34px #fe453d;
}
/* 大灯灯光 */
.car .light {
position: absolute;
top: 5px;
right: -2px;
width: 10px;
height: 70px;
background-color: #0002;
border-radius: 15px;
transform-style: preserve-3d;
}
/* 上灯光 */
.car .light::before {
position: absolute;
top: 5px;
left: 0;
content: "";
width: 150px;
height: 16px;
background: linear-gradient(90deg, #fff6, transparent);
transform-origin: left;
/* 为 3D 转换元素定义透视视图沿Y轴转负50度 */
transform: perspective(500px) rotateY(-50deg);
}
/* 下灯光 */
.car .light::after {
position: absolute;
bottom: 5px;
left: 0;
content: "";
width: 150px;
height: 16px;
background: linear-gradient(90deg, #fff6, transparent);
transform-origin: left;
transform: perspective(500px) rotateY(-50deg);
}
</style>
</head>
<body>
<div class="road">
<div class="car">
<div class="light"></div>
<div class="top">
<b></b>
<i></i>
</div>
</div>
<div class="car">
<div class="light"></div>
<div class="top">
<b></b>
<i></i>
</div>
</div>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022/12/29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
