HTML+CSS：3D卡片组件

效果演示

25-3D卡片组件.gif

实现了一个名为“卡片”的效果，当鼠标悬停在一个特定的元素上时，该元素会变得更亮，并且会在其他元素上方显示一个卡片。当鼠标悬停在卡片上时，卡片会变得更亮，并且会在其他元素上方显示一个提示信息。这个效果可以用来展示一些信息或者链接，让用户更好地了解和交互。

Code

<div class="container noselect">
    <div class="canvas">
        <div class="tracker tr-1"></div>
        <div class="tracker tr-2"></div>
        <div class="tracker tr-3"></div>
        <div class="tracker tr-4"></div>
        <div class="tracker tr-5"></div>
        <div class="tracker tr-6"></div>
        <div class="tracker tr-7"></div>
        <div class="tracker tr-8"></div>
        <div class="tracker tr-9"></div>
        <div class="tracker tr-10"></div>
        <div class="tracker tr-11"></div>
        <div class="tracker tr-12"></div>
        <div class="tracker tr-13"></div>
        <div class="tracker tr-14"></div>
        <div class="tracker tr-15"></div>
        <div class="tracker tr-16"></div>
        <div class="tracker tr-17"></div>
        <div class="tracker tr-18"></div>
        <div class="tracker tr-19"></div>
        <div class="tracker tr-20"></div>
        <div class="tracker tr-21"></div>
        <div class="tracker tr-22"></div>
        <div class="tracker tr-23"></div>
        <div class="tracker tr-24"></div>
        <div class="tracker tr-25"></div>
        <div id="card">
            <p id="prompt">HOVER OVER :D</p>
            <div class="title">look mom,<br>no JS</div>
            <div class="subtitle">
                mouse hover tracker
            </div>

        </div>
    </div>
</div>

/* 设置容器的样式 */
.container {
    position: relative; /* 相对定位 */
    width: 190px; /* 宽度 */
    height: 254px; /* 高度 */
    transition: 200ms; /* 过渡效果 */
  }
  
  /* 激活状态下容器的样式 */
  .container:active {
    width: 180px; /* 宽度变小 */
    height: 245px; /* 高度变小 */
  }
  
  /* 卡片样式 */
  #card {
    position: absolute; /* 绝对定位 */
    inset: 0; /* 四边与父容器对齐 */
    z-index: 0; /* 层级 */
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    border-radius: 20px; /* 边框圆角 */
    transition: 700ms; /* 过渡效果 */
    background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); /* 背景渐变色 */
  }
  
  /* 子标题样式 */
  .subtitle {
    transform: translateY(160px); /* Y轴方向上的位移 */
    color: rgb(134, 110, 221); /* 文字颜色 */
    text-align: center; /* 文字居中对齐 */
    width: 100%; /* 宽度 */
  }
  
  /* 标题样式 */
  .title {
    opacity: 0; /* 透明度 */
    transition-duration: 300ms; /* 过渡时间 */
    transition-timing-function: ease-in-out-out; /* 过渡动画的时间函数 */
    transition-delay: 100ms; /* 过渡延迟时间 */
    position: absolute; /* 绝对定位 */
    font-size: x-large; /* 字体大小 */
    font-weight: bold; /* 字体粗细 */
    color: white; /* 文字颜色 */
  }
  
  /* 鼠标悬停在追踪器上时显示标题 */
  .tracker:hover ~ #card .title {
    opacity: 1; /* 显示标题 */
  }
  
  /* 提示文字样式 */
  #prompt {
    bottom: 8px; /* 底部定位 */
    left: 12px; /* 左侧定位 */
    z-index: 20; /* 层级 */
    font-size: 20px; /* 字体大小 */
    font-weight: bold; /* 字体粗细 */
    transition: 300ms ease-in-out-out; /* 过渡效果 */
    position: absolute; /* 绝对定位 */
    max-width: 110px; /* 最大宽度 */
    color: rgb(255, 255, 255); /* 文字颜色 */
  }
  
  /* 追踪器样式 */
  .tracker {
    position: absolute; /* 绝对定位 */
    z-index: 200; /* 层级 */
    width: 100%; /* 宽度 */
    height: 100%; /* 高度 */
  }
  
  /* 鼠标悬停在追踪器上时隐藏提示文字 */
  .tracker:hover ~ #card #prompt {
    opacity: 0; /* 隐藏提示文字 */
  }
  
  /* 鼠标悬停在追踪器上时卡片的样式 */
  .tracker:hover ~ #card {
    transition: 300ms; /* 过渡效果 */
    filter: brightness(1.1); /* 亮度增加 */
  }
  
  /* 鼠标悬停在容器上时在卡片前面添加一个遮罩层 */
  .container:hover #card::before {
    transition: 200ms; /* 过渡效果 */
    content: ''; /* 内容为空 */
    opacity: 80%; /* 遮罩层透明度 */
  }
  
  /* 3D效果容器样式 */
  .canvas {
    perspective: 800px; /* 透视效果 */
    inset: 0; /* 四边与父容器对齐 */
    z-index: 200; /* 层级 */
    position: absolute; /* 绝对定位 */
    display: grid; /* 网格布局 */
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* 网格列布局 */
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr; /* 网格行布局 */
    gap: 0px 0px; /* 网格间隙 */
    grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5"
      "tr-6 tr-7 tr-8 tr-9 tr-10"
      "tr-11 tr-12 tr-13 tr-14 tr-15"
      "tr-16 tr-17 tr-18 tr-19 tr-20"
      "tr-21 tr-22 tr-23 tr-24 tr-25"; /* 网格区域布局 */
  }
  
  /* 卡片的背景遮罩层样式 */
  #card::before {
    content: ''; /* 内容为空 */
    background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); /* 背景渐变色 */
    filter: blur(2rem); /* 模糊效果 */
    opacity: 30%; /* 遮罩层透明度 */
    width: 100%; /* 宽度 */
    height: 100%; /* 高度 */
    position: absolute; /* 绝对定位 */
    z-index: -1; /* 层级 */
    transition: 200ms; /* 过渡效果 */
  }
  
  /* 追踪器位置样式 */
  .tr-1 {
    grid-area: tr-1; /* 网格区域位置 */
  }
  .tr-2 {
    grid-area: tr-2; /* 网格区域位置 */
  }
  .tr-3 {
    grid-area: tr-3; /* 网格区域位置 */
  }
  .tr-4 {
    grid-area: tr-4; /* 网格区域位置 */
  }
  .tr-5 {
    grid-area: tr-5; /* 网格区域位置 */
  }
  .tr-6 {
    grid-area: tr-6; /* 网格区域位置 */
  }
  .tr-7 {
    grid-area: tr-7; /* 网格区域位置 */
  }
  .tr-8 {
    grid-area: tr-8; /* 网格区域位置 */
  }
  .tr-9 {
    grid-area: tr-9; /* 网格区域位置 */
  }
  .tr-10 {
    grid-area: tr-10; /* 网格区域位置 */
  }
  .tr-11 {
    grid-area: tr-11; /* 网格区域位置 */
  }
  .tr-12 {
    grid-area: tr-12; /* 网格区域位置 */
  }
  .tr-13 {
    grid-area: tr-13; /* 网格区域位置 */
  }
  .tr-14 {
    grid-area: tr-14; /* 网格区域位置 */
  }
  .tr-15 {
    grid-area: tr-15; /* 网格区域位置 */
  }
  .tr-16 {
    grid-area: tr-16; /* 网格区域位置 */
  }
  .tr-17 {
    grid-area: tr-17; /* 网格区域位置 */
  }
  .tr-18 {
    grid-area: tr-18; /* 网格区域位置 */
  }
  .tr-19 {
    grid-area: tr-19; /* 网格区域位置 */
  }
  .tr-20 {
    grid-area: tr-20; /* 网格区域位置 */
  }
  .tr-21 {
    grid-area: tr-21; /* 网格区域位置 */
  }
  .tr-22 {
    grid-area: tr-22; /* 网格区域位置 */
  }
  .tr-23 {
    grid-area: tr-23; /* 网格区域位置 */
  }
  .tr-24 {
    grid-area: tr-24; /* 网格区域位置 */
  }
  .tr-25 {
    grid-area: tr-25; /* 网格区域位置 */
  }
  
  /* 鼠标悬停在追踪器上时卡片的旋转样式 */
  .tr-1:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-2:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-3:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-4:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-5:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-6:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-7:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-8:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-9:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-10:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-11:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-12:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-13:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-14:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-15:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-16:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-17:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-18:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-19:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-20:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-21:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-22:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-23:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-24:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg); /* 旋转效果 */
  }
  .tr-25:hover ~ #card {
    transition: 125ms ease-in-out; /* 过渡效果 */
    transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg); /* 旋转效果 */
  }
  
  /* 禁止选中文本 */
  .noselect {
    -webkit-touch-callout: none; /* 禁止长按菜单 */
    -webkit-user-select: none; /* 禁止选择文本（Chrome、Safari） */
    -moz-user-select: none; /* 禁止选择文本（Firefox） */
    -ms-user-select: none; /* 禁止选择文本（IE、Edge） */
    user-select: none; /* 禁止选择文本（通用） */
  }