19 动态卡片

效果演示

实现了一个卡片式的效果，其中包括一个卡片盒子和多个卡片。每个卡片都有一个标题、一个内容、一个图片和一个链接。当用户鼠标悬停在卡片上时，卡片的标题和图片会变暗，卡片的内容会向下移动并显示出来。整个效果看起来像是一个卡片式的页面，每个卡片都有不同的样式和内容。

Code

<div class="cardBox">
    <div class="card">
        <div class="h4">Animated card</div>

        <div class="content">
            <div class="h3">How's it goin Fam ?</div>
            <p>This is Ruobing Says, your tech mate!!! I love you all. 
                pLets make this world a better place for all
                of us. Keep prospering...Keep learning!!!</p>
        </div>
    </div>
</div>

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

.cardBox {
  width: 250px;
  height: 300px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px,
    rgba(0, 0, 0, 0.5) 0px 2px 25px 0px;
}

.card {
  position: absolute;
  width: 95%;
  height: 95%;
  background: #000814;
  border-radius: 20px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  padding: 20px;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;
}

.card .h4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 800;
  pointer-events: none;
  opacity: .5;
}

.card .content .h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

.card .content p {
  font-size: 14px;
  line-height: 1.4em;
}

.card .content {
  transform: translateY(100%);
  opacity: 0;
  transition: 0.3s ease-in-out;
}

.card:hover .content {
  transform: translateY(0);
  opacity: 1;
}

.card:hover .h4 {
  opacity: 0;
}

.cardBox::before {
  content: "";
  position: absolute;
  width: 40%;
  height: 150%;
  background: #40E0D0;
  background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
  background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
  transform-origin: center;
  animation: glowing_401 5s linear infinite;
}

@keyframes glowing_401 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

实现思路拆分

body {
  height: 100vh; /* 设置整个页面的高度为视口高度 */
  display: flex; /* 设置盒子为弹性盒子 */
  justify-content: center; /* 设置盒子内部元素水平居中对齐 */
  align-items: center; /* 设置盒子内部元素垂直居中对齐 */
  background-color: #e8e8e8; /* 设置背景颜色为浅灰色 */
}

这段代码定义了整个页面的样式，包括高度、对齐方式、背景颜色等。

.cardBox {
  width: 250px; /* 设置盒子的宽度为250像素 */
  height: 300px; /* 设置盒子的高度为300像素 */
  position: relative; /* 设置盒子为相对定位 */
  display: grid; /* 设置盒子为网格布局 */
  place-items: center; /* 设置盒子内部元素居中对齐 */
  overflow: hidden; /* 设置盒子内容溢出隐藏 */
  border-radius: 20px; /* 设置盒子圆角半径为20像素 */
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px, /* 设置盒子阴影效果 */
    rgba(0, 0, 0, 0.5) 0px 2px 25px 0px;
}

这段代码定义了cardBox盒子的样式，包括宽度、高度、对齐方式、布局方式、溢出隐藏、圆角半径、阴影效果等。

.card {
  position: absolute; /* 设置卡片为绝对定位 */
  width: 95%; /* 设置卡片的宽度为95% */
  height: 95%; /* 设置卡片的高度为95% */
  background: #000814; /* 设置卡片的背景颜色为深蓝色 */
  border-radius: 20px; /* 设置卡片的圆角半径为20像素 */
  z-index: 5; /* 设置卡片的堆叠顺序为5 */
  display: flex; /* 设置卡片为弹性盒子 */
  justify-content: center; /* 设置卡片内部元素水平居中对齐 */
  align-items: center; /* 设置卡片内部元素垂直居中对齐 */
  flex-direction: column; /* 设置卡片内部元素垂直排列 */
  text-align: center; /* 设置卡片内部元素水平居中对齐 */
  color: #ffffff; /* 设置卡片内部元素文本颜色为白色 */
  overflow: hidden; /* 设置卡片内部元素溢出隐藏 */
  padding: 20px; /* 设置卡片内部元素内边距为20像素 */
  cursor: pointer; /* 设置卡片为可点击的 */
  box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 60px -12px inset, /* 设置卡片阴影效果 */
    rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;
}

这段代码定义了卡片的标题和内容的样式，以及卡片盒子的阴影和渐变背景的样式。下面是每行代码的作用和注释：

.card.h4 {
  position: absolute; /* 设置标题为绝对定位 */
  top: 50%; /* 设置标题距离顶部50% */
  left: 50%; /* 设置标题距离左侧50% */
  transform: translate(-50%, -50%); /* 设置标题水平和垂直居中 */
  font-size: 20px; /* 设置标题字体大小为20像素 */
  font-weight: 800; /* 设置标题字体粗细为800 */
  pointer-events: none; /* 设置标题不可点击 */
  opacity:.5; /* 设置标题透明度为0.5 */
}

这段代码定义了卡片的标题样式，包括位置、大小、字体粗细、透明度等。

.card.content.h3 {
  font-size: 18px; /* 设置标题字体大小为18像素 */
  font-weight: 800; /* 设置标题字体粗细为800 */
  margin-bottom: 10px; /* 设置标题下边距为10像素 */
}

这段代码定义了卡片内容的标题样式，包括字体大小、字体粗细、下边距等。

.card.content p {
  font-size: 14px; /* 设置内容字体大小为14像素 */
  line-height: 1.4em; /* 设置内容行高为1.4倍字体大小 */
}

这段代码定义了卡片内容的文本样式，包括字体大小、行高等。

.card.content {
  transform: translateY(100%); /* 设置内容向下移动100% */
  opacity: 0; /* 设置内容透明度为0 */
  transition: 0.3s ease-in-out; /* 设置内容过渡效果 */
}

这段代码定义了卡片内容的样式，包括位置、透明度、过渡效果等。

.card:hover.content {
  transform: translateY(0); /* 设置内容向上移动0 */
  opacity: 1; /* 设置内容透明度为1 */
}

这段代码定义了鼠标悬停在卡片上时，卡片内容的样式，包括位置、透明度等。

.card:hover.h4 {
  opacity: 0; /* 设置标题透明度为0 */
}

这段代码定义了鼠标悬停在卡片上时，卡片标题的样式，包括透明度等。

.cardBox::before {
  content: ""; /* 设置伪元素内容为空 */
  position: absolute; /* 设置伪元素为绝对定位 */
  width: 40%; /* 设置伪元素宽度为40% */
  height: 150%; /* 设置伪元素高度为150% */
  background: #40E0D0; /* 设置伪元素背景颜色为深绿色 */
  background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); /* 设置伪元素渐变背景 */
  background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
  transform-origin: center; /* 设置伪元素旋转中心为中心 */
  animation: glowing_401 5s linear infinite; /* 设置伪元素动画效果 */
}

这段代码定义了卡片盒子的阴影和渐变背景的样式，包括位置、大小、背景颜色、渐变方向、旋转中心、动画效果等。

@keyframes glowing_401 {
  0% {
    transform: rotate(0); /* 设置动画起始状态，将卡片盒子的阴影和渐变背景旋转0度 */
  }

  100% {
    transform: rotate(360deg); /* 设置动画结束状态，将卡片盒子的阴影和渐变背景旋转360度 */
  }
}

这段代码定义了一个名为glowing_401的动画效果，包括两个状态（0%和100%）。在0%状态下，将卡片盒子的阴影和渐变背景旋转0度，从而创建出一个静态的效果。在100%状态下，将卡片盒子的阴影和渐变背景旋转360度，从而创建出一个闪烁的效果。通过设置不同的旋转角度，可以控制闪烁的速度和效果。