开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

前言

马上进入2023年了,这一年我们经历了很多有酸甜苦辣,但是并不妨碍我们用崭新的自己来面对新的一年,所以我用css画了一辆喜庆的车车来让人们驶入2023

绘制静态车车及路线

首先我们需要绘制车车驾驶的公路及我们需要运动起来的车车

结构

主要是css来实现我们的车及公路,结构上如下:

// 公路
   <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>

CSS部分

公路

使用的也是flex布局,transform-style这个属性就是让我们看起来更加有3D感,加上perspective(距离多远来看这个元素),就像看电视一样距离自己把控

.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: "";
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    #fff,
    #fff 50%,
    transparent 50%,
    transparent 100%
  );
  background-size: 50px;
  position: absolute;
// 动画让虚线动起来
  animation: animate-road 0.1s linear infinite;
}
// 虚线运动动画
@keyframes animate-road {
  0% {
    background-position: 50px 0;
  }
  100% {
    background-position: 0 0;
  }
}

车底

这里车子也用了transform-style跟perspective,保证车子看起来比较立体,这里车子颜色可以自行修改,修改后后面其它部位也要一起改,保证车子总体颜色差距不大就行

.car {
  width: 200px;
  height: 80px;
  background-color: #e72b25;
  border-radius: 10px;
  box-shadow: -10px 10px rgba(0, 0, 0, 0.2);
  /* 表示所有子元素在3D空间中呈现 */
  transform-style: preserve-3d;
  perspective: 800px;
  position: absolute;
  left: 50px;
  z-index: 10;
}

尾灯前灯

这里尾灯跟前灯都是利用伪元素定位放上去的,由于我的车身是红色所以尾灯采用了黄色,正常应该尾灯是红色的😁,前大灯就是白色

.car::before {
  content: "";
  width: 5px;
  height: 15px;
  background-color: #fdd206;
  border-radius: 2px;
  box-shadow: 0 42px #fdd206;
  position: absolute;
  top: 12px;
  left: 2px;
}
.car::after {
  content: "";
  width: 5px;
  height: 16px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 44px #fff;
  position: absolute;
  top: 10px;
  right: 2px;
}

前后盖及车顶文字

这里inset解释一下 inset:5px 10px;等同于 top: 5px; right: 10px; bottom: 5px; left: 10px;就是对一些top,left,bottom,right的简写

.car .top {
  position: absolute;
  inset: 5px 10px;
  background-color: #fe453d;
  border-radius: 10px;
  overflow: hidden;
}
.car .top::before {
  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;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: 10;
}

车窗车顶及车斜杠

这里都是利用定位来实现车子的架构,jym比较少用的也就这两个属性:transform-origin:旋转的基点位置,transform: rotate(角度)2D旋转角度

.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;

}

大灯灯光

这里的大灯灯光加了3D旋转的效果,让灯光看起来不是平行的而是呈现一个往外扩大的

.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;
  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);

}

车子动画

这里车子动画可以自行去修改,我的动画比较简单,就是让2022的车往边靠,2023的车进行超车的这么一个效果,如果有啥更好的想法可以自己去进行实践,代码都在下面(都加上了注释,方便各位阅读),要的小伙伴可以自取

全部代码

往期精彩

结尾

阳历新的一年马上就过去了,本蛙在这里提前恭祝大家新年快乐!!希望新的一年大家用一个新的状态去迎接,祝大家顺顺利利,升职加薪!!🎉🎉🎉

CSS画了个车车🚗来迎接新的一年

前言