12卡片组件

效果演示

实现了一个名为若冰说CSS的卡片组件，包括宽度、高度、背景颜色、相对定位、flex布局、内容居中对齐、溢出隐藏、圆角半径等样式。card组件内部包含一个h2标题，一个带有渐变背景色和旋转动画的before伪元素，以及一个after伪元素。通过设置伪元素的样式，可以实现卡片的背景色和动画效果。在注释掉的部分，可以通过鼠标悬停在卡片上触发伪元素的动画效果，实现更丰富的交互效果。

Code

  <div class="card">
      <h2>若冰说CSS</h2>
  </div>

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e8e8e8;
}

.card {
  width: 190px;
  height: 254px;
  background: #07182E;
  position: relative;
  display: flex;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
}

.card h2 {
  z-index: 1;
  color: white;
  font-size: 2em;
}

.card::before {
  content: '';
  position: absolute;
  width: 100px;
  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;
}

@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

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

实现思路拆分

body {
  height: 100vh; /* 设置body高度为视口高度 */
  display: flex; /* 设置body元素为flex布局 */
  justify-content: center; /* 设置flex容器中内容的水平居中 */
  align-items: center; /* 设置flex容器中内容的垂直居中 */
  background-color: #e8e8e8; /* 设置背景颜色为浅灰色 */
}

这段代码设置了整个页面的样式，包括高度、布局、背景颜色等。

.card {
  width: 190px; /* 设置卡片宽度为190px */
  height: 254px; /* 设置卡片高度为254px */
  background: #07182E; /* 设置卡片背景颜色为深蓝色 */
  position: relative; /* 设置卡片为相对定位 */
  display: flex; /* 设置卡片为flex布局 */
  place-content: center; /* 设置flex容器中内容的垂直居中 */
  place-items: center; /* 设置flex容器中内容的水平居中 */
  overflow: hidden; /* 设置卡片内容溢出隐藏 */
  border-radius: 20px; /* 设置卡片圆角半径为20px */
}

这段代码设置了卡片的样式，包括宽度、高度、背景颜色、相对定位、flex布局、内容居中对齐、溢出隐藏、圆角半径等样式。

.card h2 {
  z-index: 1; /* 设置标题z-index为1 */
  color: white; /* 设置标题颜色为白色 */
  font-size: 2em; /* 设置标题字体大小为2em */
}

这段代码设置了卡片内部的标题样式，包括z-index、颜色和字体大小等。

.card::before {
  content: ''; /* 设置伪元素内容为空 */
  position: absolute; /* 设置伪元素为绝对定位 */
  width: 100px; /* 设置伪元素宽度为100px */
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255)); /* 设置伪元素背景颜色为渐变色 */
  height: 130%; /* 设置伪元素高度为130% */
  animation: rotBGimg 3s linear infinite; /* 设置伪元素动画效果 */
  transition: all 0.2s linear; /* 设置伪元素过渡效果 */
}

这段代码设置了卡片内部的伪元素样式，包括内容、位置、宽度、背景颜色、高度、动画效果和过渡效果等。

@keyframes rotBGimg {
  from {
    transform: rotate(0deg); /* 设置动画从0deg到360deg的状态时的变换 */
  }

  to {
    transform: rotate(360deg); /* 设置动画从360deg到0deg的状态时的变换 */
  }
}

这段代码定义了一个名为rotBGimg的动画效果，包括从0deg到360deg的变换和从360deg到0deg的变换。

.card::after {
  content: ''; /* 设置伪元素内容为空 */
  position: absolute; /* 设置伪元素为绝对定位 */
  background: #07182E; /* 设置伪元素背景颜色为深蓝色 */
  inset: 5px; /* 设置伪元素内边距为5px */
  border-radius: 15px; /* 设置伪元素圆角半径为15px */
}

这段代码设置了卡片内部的伪元素的after伪元素样式，包括内容、位置、背景颜色、内边距、圆角半径等。

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

这段代码设置了鼠标悬停在卡片上时，伪元素的背景颜色和动画