3D角色展示

先看效果:

再看代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D卡片悬停</title>
  <style>
    @font-face {
      font-family: "Exoct";
      src: url("https://assets.codepen.io/1480814/films.EXH_____.ttf")
    }
    figure {
      width: 100%;
      aspect-ratio: 1;
      margin: 0 0 60px;
      padding: 5px 20px 0;
      box-sizing: border-box;
      display: grid;
      grid-template-rows: 100%;
      cursor: pointer;
      position: relative;
      filter: drop-shadow(0 0 20px rgb(0 0 0/50%));
    }
    figure:before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background: top/cover;
      transform-origin: bottom;
      filter: brightness(.9);
      transition: .5s;
    }
    figure:before {
      background-image: url(https://assets.codepen.io/1480814/necro-back.jpg)
    }
    figure + figure:before {
      background-image: url(https://assets.codepen.io/1480814/druid-bac.jpg)
    }
    img {
      grid-area: 1/1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      filter: contrast(.8) brightness(.7);
      place-self: end center;
      transition: .5s;
    }
    figcaption {
      grid-area: 1/1;
      width: calc(100% + 40px);
      font-family: Exoct;
      color: #fff;
      font-size: min(32px,5vmin);
      text-align: center;
      place-self: end center;
      transform: perspective(500px) translateY(100%) rotateX(-90deg);
      backface-visibility: hidden;
      transform-origin: top;
      background: #000;
      transition: .5s;
    }
    figure:hover img {
      width: 130%;
      height: 255%;
      filter: contrast(1);
    }
    figure:hover::before {
      filter: brightness(.3);
      transform: perspective(500px) rotateX(60deg);
    }
    figure:hover figcaption{
      transform: perspective(500px)translateY(100%) rotateX(-30deg);
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: min(230px,35vmin);
      place-content: end center;
      gap: 50px;
      background:
              linear-gradient(#0000,rgb(50 50 50 / 88%)),
              url(https://assets.codepen.io/1480814/diablo-reaper-of-souls-mw-1360x768.jpg) top/cover;
    }

  </style>
</head>
<body>
<figure>
  <img src="https://assets.codepen.io/1480814/necro.png" alt="Necromancer">
  <figcaption>The Necro</figcaption>
</figure>
<figure>
  <img src="https://assets.codepen.io/1480814/druide.png" alt="Druid">
  <figcaption>The Druid</figcaption>
</figure>

</body>
</html>
相关推荐
Savior`L2 小时前
CSS知识复习5
前端·css
Liudef067 小时前
儿童趣味记忆配对游戏
css·游戏·css3
gis分享者13 小时前
学习threejs,使用自定义GLSL 着色器,生成漂流的3D能量球
3d·threejs·着色器·glsl·shadermaterial·能量球
m0_7431064614 小时前
【论文笔记】BlockGaussian:巧妙解决大规模场景重建中的伪影问题
论文阅读·计算机视觉·3d·aigc·几何学
吉吉安15 小时前
两张图片对比clip功能
javascript·css·css3
快起来别睡了17 小时前
CSS 层叠上下文:从“谁在前,谁在后”说起
css
向宇it19 小时前
【unity小技巧】在 Unity 中将 2D 精灵添加到 3D 游戏中,并实现阴影投射效果,实现类《八分旅人》《饥荒》等等的2.5D游戏效果
游戏·3d·unity·编辑器·游戏引擎·材质
南方kenny19 小时前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
爱编程的喵1 天前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css
傻球1 天前
彻底搞懂「像素/PPI/DPI/分辨率/DPR/缩放」之间的关系
前端·css