当前位置： 首页 > news >正文

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

news 2025/7/7 0:27:52

请添加图片描述

文章目录

  • 一、用到的一些CSS技术
  • 二、实现效果
  • 三、代码

一、用到的一些CSS技术

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

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

二、实现效果

请添加图片描述

三、代码

<!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>

相关文章：

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

文章目录 一、用到的一些CSS技术二、实现效果三、代码 一、用到的一些CSS技术 渐变 conic-gradientbox-shadowclip-path变换、过渡 transform、transition动画 animation keyframes伪类、伪元素 :hover、::before、::after …绝对布局。。。 clip-path 生成网站 https://techb…...

编程日记 2023/9/4 13:47:47

lintcode 667 · 最长的回文序列【中等 递归到动态规划】

题目 https://www.lintcode.com/problem/667/ 给一字符串 s, 找出在 s 中的最长回文子序列的长度. 你可以假设 s 的最大长度为 1000.样例 样例1输入&#xff1a; "bbbab" 输出&#xff1a; 4 解释&#xff1a; 一个可能的最长回文序列为 "bbbb" 样例2输入…...

编程日记 2023/9/4 13:46:45

oracle sql语言模糊查询

在Where子句中&#xff0c;可以对datetime、char、varchar字段类型的列用Like子句配合通配符选取那些“很像...”的数据记录&#xff0c;以下是可使用的通配符&#xff1a; % 零或者多个字符 _ 单一任何字符&#xff08;下划线&#xff09; / 特殊字符 [] 在某一范…...

编程日记 2023/9/4 13:45:44

【Ubuntu】解决ubuntu虚拟机和物理机之间复制粘贴问题（无需桌面工具）

解决Ubuntu虚拟机和物理机之间复制粘贴问题 第一步 先删除原来的vmware tools&#xff08;如果有的话&#xff09; sudo apt-get autoremove open-vm-tools第二步 安装软件包&#xff0c;一般都是用的desktop版本&#xff08;如果是server换一下&#xff09; sudo apt-get …...

编程日记 2023/9/4 13:44:42

解决ubuntu文件系统变成只读的方法

所欲文件变成只读&#xff0c;这种情况一般是程序执行发生错误&#xff0c;磁盘的一种保护措施 使用fsck修复 方法一&#xff1a; # 切换root sudo su # 修复磁盘错误 fsck -t ext4 -v /dev/sdb6 方法二&#xff1a; fsck.ext4 -y /dev/sdb6 重新用读写挂载 上面两种方法&…...

编程日记 2023/9/4 13:43:40

高数刷题笔记

常见等价无穷小 注意讨论 第二个等价无穷小 夹逼定理&#xff01;&#xff01;&#xff01; 递归数列可以尝试用关系式法 通常用到夹逼定理的时候都会用到放缩构造出一大一小两个函数&#xff0c;将原函数夹在中间&#xff0c;然后使得两端函数极限相同则可推出原函数的极限&am…...

编程日记 2023/9/4 13:42:39

c++入门一

参考&#xff1a;https://www.learncpp.com/cpp-tutorial/ When you finish, you will not only know how to program in C, you will know how NOT to program in C, which is arguably as important. Tired or unhappy programmers make mistakes, and debugging code tends…...

编程日记 2023/9/4 13:41:38

2023年项目进度管理平台排行榜

项目进度管理是项目管理学科中的一门重要课程&#xff0c;通过合理的项目计划&#xff0c;有效控制项目进度&#xff0c;保障项目能够按时交付。 不过&#xff0c;项目进度管理并不是一件简单的工作&#xff0c;不仅需要面对项目过程中各种突发情况&#xff0c;还需要做好团队协…...

编程日记 2023/9/4 13:40:36

【设计模式】面向对象设计八大原则

&#xff08;1&#xff09;依赖倒置原则&#xff08;DIP&#xff09; 高层模块&#xff08;稳定&#xff09;不应该依赖于低层模块&#xff08;变化&#xff09;&#xff0c;二者都应该依赖于抽象&#xff08;稳定&#xff09;。抽象&#xff08;稳定&#xff09;不应该依赖于…...

编程日记 2023/9/4 13:39:35

python数分实战探索霍尔特法之销售预测python代码实现以及预测图绘制

探索霍尔特法：时间序列预测中的线性趋势捕捉 时间序列分析是统计学和数据分析中的一个核心领域。无论是预测股票市场的走势，还是预测未来的销售量，一个精确和可靠的预测模型都是至关重要的。在众多的时间序列预测方法中，霍尔特法（Holts method）脱颖而出，特别是当我们面…...

编程日记 2023/9/4 13:38:33

java线程状态

图形说明: Thread.State源码注释: public enum State {/*** 新生状态&#xff1a;线程对象创建&#xff0c;但是还未start()*/NEW,/*** 线程处于可运行状态&#xff0c;但是这个可运行状态并不代表线程一定在虚拟机中执行。* 需要等待从操作系统获取到资源(比如处理器时间片…...

编程日记 2023/9/4 13:37:31

编译问题：error: ‘printf’ was not declared in this scope

这个错误提示意味着编译器在当前作用域内无法找到 printf 函数的声明。这通常是因为没有包含 <stdio.h> 头文件导致的。 解决方法是在程序中添加 #include <stdio.h> 这一行代码。这个头文件中包含了 printf 函数的声明&#xff0c;告诉编译器如何处理该函数。...

编程日记 2023/9/4 13:36:31

改变C++中私有变量成员的值

1、没有引用的情况&#xff1a; #include <iostream> #include <queue> using namespace std; class Person { public:queue<int>que; public:queue<int> getQueue(){return que;}void push(int a){que.push(a);}void pop(){que.pop();} };int main()…...

编程日记 2023/9/4 13:35:29

线程唯一的单例

经典设计模式的单例模式是指进程唯一的对象实例&#xff0c;实现code如下&#xff1a; package cun.zheng.weng.design.sinstnce;import java.util.concurrent.CountDownLatch; import java.util.concurrent.LinkedBlockingQueue; import java.util.concurrent.ThreadPoolExec…...

编程日记 2023/9/4 13:34:25

明厨亮灶监控实施方案 opencv

明厨亮灶监控实施方案通过pythonopencv网络模型图像识别算法&#xff0c;一旦发现现场人员没有正确佩戴厨师帽或厨师服&#xff0c;及时发现明火离岗、不戴口罩、厨房抽烟、老鼠出没以及陌生人进入后厨等问题生成告警信息并进行提示。OpenCV是一个基于Apache2.0许可&#xff08…...

编程日记 2023/9/4 13:33:24

14 mysql bit/json/enum/set 的数据存储

前言 这里主要是 由于之前的一个 datetime 存储的时间 导致的问题的衍生出来的探究 探究的主要内容为 int 类类型的存储, 浮点类类型的存储, char 类类型的存储, blob 类类型的存储, enum/json/set/bit 类类型的存储 本文主要 的相关内容是 bit/json/enum/set 类类型的相关…...

编程日记 2023/9/4 13:32:22

04_19linux自己撸内存池实战,仿造slab分配器

前言 自己撸一个内存池 其实就相当于linux里面带的 slab分配器 可以翻翻之前的章 看看slab 和伙伴分配器的不同 在学习c语言时&#xff0c;我们常常会使用到malloc()去申请一块内存空间&#xff0c;用于存放我们的数据。刚开始我们只要知道申请内存时使用用malloc去申请一块就…...

编程日记 2023/9/4 13:31:21

【HDFS】XXXRpcServer和ClientNamenodeProtocolServerSideTranslatorPB小记

初始化RouterRpcServer时候会new ClientNamenodeProtocolServerSideTranslatorPB，并把当前RouterRpcServer对象（this）传入构造函数： ClientNamenodeProtocolServerSideTranslatorPBclientProtocolServerTranslator =new ClientNamenodeProtocolServerSideTranslatorPB(this…...

编程日记 2023/9/4 13:30:19

二分，Dijkstra，340. 通信线路

在郊区有 N 座通信基站&#xff0c;P 条 双向 电缆&#xff0c;第 i 条电缆连接基站 Ai 和 Bi。 特别地&#xff0c;1 号基站是通信公司的总站&#xff0c;N 号基站位于一座农场中。 现在&#xff0c;农场主希望对通信线路进行升级&#xff0c;其中升级第 i 条电缆需要花费 L…...

编程日记 2023/9/4 13:29:17

Stable Diffusion---Ai绘画-下载-入门-进阶(笔记整理)

前言 注&#xff1a;本文偏向于整理&#xff0c;都是跟着大佬们学的。 推荐两个b站up主&#xff0c;学完他们俩的东西基本就玩转SD为底的ai绘画&#xff1a; 秋葉aaaki&#xff0c;Nenly同学 1.首先SD主流的就是秋叶佬的Webui了&#xff0c;直接压缩包下载即可&#xff0c;下…...

编程日记 2023/9/4 13:28:15

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/7/5 21:21:44

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/7/5 21:19:59

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2025/7/1 8:52:28

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/7/6 0:57:39

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/6/21 10:09:08

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/6/21 12:56:10

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/7/5 22:58:47

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/7/6 19:01:51

OPENCV图形计算面积、弧长API讲解（1）

一.OPENCV图形面积、弧长计算的API介绍 之前我们已经把图形轮廓的检测、画框等功能讲解了一遍。那今天我们主要结合轮廓检测的API去计算图形的面积&#xff0c;这些面积可以是矩形、圆形等等。图形面积计算和弧长计算常用于车辆识别、桥梁识别等重要功能&#xff0c;常用的API…...

编程新知 2025/7/6 2:44:20

Cursor AI 账号纯净度维护与高效注册指南

Cursor AI 账号纯净度维护与高效注册指南&#xff1a;解决限制问题的实战方案 风车无限免费邮箱系统网页端使用说明|快速获取邮箱|cursor|windsurf|augment 问题背景 在成功解决 Cursor 环境配置问题后&#xff0c;许多开发者仍面临账号纯净度不足导致的限制问题。无论使用 16…...

编程新知 2025/7/6 3:34:56