CSS 一个好玩的卡片“开卡效果”


文章目录

一、用到的一些CSS技术

  • 渐变 conic-gradient
  • box-shadow
  • clip-path
  • 变换、过渡 transformtransition
  • 动画 animation @keyframes
  • 伪类、伪元素 :hover::before::after ...
  • 绝对布局
  • 。。。

clip-path 生成网站
https://techbrood.com/tool?p=css-clip-path

二、实现效果

三、代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片测试</title>

  <style>
    body{
      margin: 0;
      padding: 0;
      height: 100vh;
    }
    .wrapper{
      position: relative;
      background: #222222;
      height: 100%;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 100px;
      padding: 10px;
      flex-wrap: wrap;
    }

    .wrapper .card-box{
      position: relative;
      width: 240px;
      height: 360px;
      text-align: center;
      box-shadow: 0 0 0 14px #080808,
      0 24px 56px var(--clr);  
      background-color: var(--clr);

    }
    .wrapper .card-box .title.text{
      line-height: 4em;
    }

    .wrapper .card-box .text{
      line-height: 19em;
      letter-spacing: 8px;
      font-weight: 900;
      transform: scale(0);
      transition: 1.2s;
      filter: blur(4px);
    }
    .wrapper .card-box:hover .text{
      transform: scale(1);
      filter: blur(0);

    }

    .wrapper .card-box .mask{
      position: absolute;
      inset: 20px;
      box-shadow: 0 0 0 18px #080808;
    }


    .wrapper .card-box .icon{
      height: 100px;
      width: 100px;
      border-radius: 50%;
      margin: auto;
      position: absolute;
      inset: 0;
      border: 3px solid white;
      background: conic-gradient(var(--clr), green, var(--clr), yellow, var(--clr));
      transform: translateY(180px) scale(.1);
      opacity: 0;
      transition: all .8s 0s;

    }


    .wrapper .card-box:hover .icon{
      transition-delay: .4s;
      animation: 3s linear 1.05s infinite spin;
      transform: translateY(0) scale(1);

      opacity: 1;

    }

    @keyframes spin {
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
    }

    .wrapper .card-box .mask span,
    .wrapper .card-box .mask::after,
    .wrapper .card-box .mask::before{
      background: #161616;
      position: absolute;
      inset: 0;
      transition: .25s;
      clip-path: polygon(0 0, 50% 40%, 100% 0);
    }
    .wrapper .card-box:hover .mask span{
      transition-delay: 0;
      clip-path: polygon(0 0, 50% 0%, 100% 0);

    }


    .wrapper .card-box .mask::before{
      transition-delay: .2s;
      clip-path: polygon(0 0, 40% 50%, 50% 100%, 0% 100%);
      content: "";
    }
    .wrapper .card-box:hover .mask::before{
      clip-path: polygon(0 0, 0 100%, 50% 100%, 0% 100%);

    }

    .wrapper .card-box .mask::after{
      transition-delay: .4s;
      clip-path: polygon(100% 0, 60% 50%, 50% 100%, 100% 100%);
      content: "";
    }
    .wrapper .card-box:hover .mask::after{
      clip-path: polygon(100% 0, 100% 100%, 50% 100%, 100% 100%);

    }

  </style>
</head>
<body>

  <div class="wrapper">
    <div class="card-box" style="--clr: red;">
      <h3 class="title text">啥也没有<br><span class="detail text">好耶</span></h3>
      <div class="icon"></div>
      <div class="mask">
        <span></span>
      </div>
    </div>

    <div class="card-box" style="--clr: blue;">
      <h3 class="title text">啥也不是<br><span class="detail text">好耶</span></h3>
      <div class="icon"></div>
      <div class="mask">
        <span></span>
      </div>
    </div>

    <div class="card-box" style="--clr: violet;">
      <h3 class="title text">啥也啥也<br><span class="detail text">好耶</span></h3>
      <div class="icon"></div>
      <div class="mask">
        <span></span>
      </div>
    </div>

  </div>
  
</body>
</html>
相关推荐
爱的叹息17 分钟前
【前端】基于 Promise 的 HTTP 客户端工具Axios 详解
前端·网络·网络协议·http
热水养鲨鱼19 分钟前
Java实现HTML转PDF(deepSeekAi->html->pdf)
人工智能·pdf·html
一个天蝎座 白勺 程序猿22 分钟前
Python爬虫(4)CSS核心机制:全面解析选择器分类、用法与实战应用
css·爬虫·python
遗憾随她而去.24 分钟前
从 0 开始认识 WebSocket:前端实时通信的利器!
前端·websocket·网络协议
老兵发新帖1 小时前
pnpm常见报错解决办法
前端
Sonetto19991 小时前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin1 小时前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快1 小时前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛1 小时前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼1 小时前
React.memo 和 useMemo
前端·javascript·react.js