示例代码

<style>
  .cus-warp {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .cus-card-container {
      position: relative;
      color: #fff;
      width: 100px;
      height: 100px;
      overflow: hidden;
  }

  .card-item {
      height: 50%;
      text-align: center;
      font-size: 80px;
      overflow: hidden;
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      transition: 0.5s;
      background: #000;
  }

  .card1 {
      line-height: 100px;
  }

  .card2 {
      line-height: 0;
      transform: rotateX(180deg);
      transform-origin: center top;
      backface-visibility: hidden;
      z-index: 2;
      top: 50%;
      border-top: 1px solid #fff;
  }

  .card3 {
      z-index: 2;
      line-height: 100px;
      transform-origin: center bottom;
      transform: rotateX(0deg);
      backface-visibility: hidden;
  }

  .card4 {
      border-top: 1px solid #fff;
      line-height: 0;
      top: 50%;
  }

  .cus-card-container:hover .card2 {
      transform: rotateX(0deg);
  }

  .cus-card-container:hover .card3 {
      transform: rotateX(-180deg);
  }
</style>
<div class="cus-warp">
    <div class="cus-card-container">
        <div class="card1 card-item">4</div>
        <div class="card2 card-item">4</div>
        <div class="card3 card-item">3</div>
        <div class="card4 card-item">3</div>
    </div>
</div>

效果展示

4
4
3
3
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 示例代码
  2. 2. 效果展示