青训营码上掘金当青训营遇上码上掘金创作过程: 首先，选择主题一：作名片。先去UI库看看有没有喜欢的样式。发现一个旋

当青训营遇上码上掘金

创作过程:

首先，选择主题一：作名片。
先去UI库看看有没有喜欢的样式。
发现一个旋转的名片，觉得有意思，就选它了

为了美观，先把名片放置在中央: 卡片的样式:

.card {
  width: 300px;
  height: 400px;
  background: #07182E;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
}

之后，为卡片添加before伪类，使其拥有一个一直旋转的长方形，颜色为渐变色

   .card::before {
     content: '';
     position: absolute;
     width: 50%;
     background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
     height: 130%;
     animation: rotBGimg 3s linear infinite;
     transition: all 0.2s linear;
   }

添加动画啊，使其旋转

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

这些步骤之后，before一直旋转，需要一个盖子遮住，只留一个5px的边框。

.card::after {
  content: '';
  position: absolute;
  background: #07182E;
  ;
  inset: 5px;
  border-radius: 15px;
}

这些完成之后，可以让其hover拥有效果其实就是将背景的渐变色改为其它的颜色，使旋转框的效果不同。

.card:hover:before {
  background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
  animation: rotBGimg 3.5s linear infinite;
}

到此，卡片的制作完成，开始制作内容

内容制作

去网上找一张美丽的图片，填充到after背景。具体代码如下所示:

.card::after {
  content: '';
  position: absolute;
  background: #07182E;
  background-image: url("https://edu-learn-bbb.oss-cn-chengdu.aliyuncs.com/file%20.jpeg") ;
  background-size: 100% 100%;
  inset: 5px;
  border-radius: 15px;
}

调整内容，写自己的介绍内容部分设计的比较随意，主要是对外层卡片达到设计
补充: 在写代码过程中，想过将::before这个元素先将其移动到中央，再进行旋转。

于是我使用

position:absolutely;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

将其置为中心，但是问题出现了旋转是以transform之前的位置进行旋转，也就是transform失效，于是在父元素.card类里居中才得以实现