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

请添加图片描述


文章目录

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

一、用到的一些CSS技术

  • 渐变 conic-gradient
  • box-shadow
  • clip-path
  • 变换、过渡 transformtransition
  • 动画 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/66981.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Yjs + Quill 实现文档多人协同编辑器开发(基础+实战)

前言 多人协同开发确实是比较难的知识点&#xff0c;在技术实现上有一定挑战&#xff0c;但随着各种技术库的发展&#xff0c;目前已经有了比较成熟的解决方案。今介绍 Yjs 基于CRDT算法&#xff0c;用于构建自动同步的协作应用程序&#xff0c;与Quill富文本编辑器&#xff0c…

自动化安装系统问题记录

Cobbler 版本更新 https://github.com/cobbler/cobbler/releases Centos7/8 Cobbler 问题&#xff1a; 部署cobbler时&#xff0c;使用cobbler get-loaders从网络下载引导加载程序时提示命令未找到 解决&#xff1a; yum -y install syslinux Rockylinux9.2 Cobbler3.…

从零开始学习 Java:简单易懂的入门指南之Collection集合及list集合(二十一)

Collection集合及list集合 1.Collection集合1.1数组和集合的区别1.2集合类体系结构1.3Collection 集合概述和使用1.4Collection集合的遍历1.4.1 迭代器遍历1.4.2 增强for1.4.3 lambda表达式 2.List集合2.1List集合的概述和特点2.2List集合的特有方法2.3List集合的五种遍历方式2…

仓库运行状况如何得知?数据挖掘是关键!

库存、订单、出入库记录、物流信息、货物状态等数据&#xff0c;是仓库管理的重要组成部分。 仓库数据的重要性 做好仓库数据管理对企业的重要性不言而喻。通过有效地管理数据&#xff0c;企业可以更好地了解市场需求和库存情况&#xff0c;快速响应市场变化&#xff0c;提高库…

CSS常用单位

css中常见单位 1.绝对单位 真实的物理尺寸&#xff0c;值取决于屏幕的分辨率 cm 厘米 mm 毫米 in 英寸&#xff08;1in 96px 2.54cm&#xff09; px 像素&#xff08;1px 1/96in&#xff09; pt 点&#xff08;1pt 1/72in&#xff09; pc 派卡&#xff08;1pc 1…

医院小程序如何在线搭建?实战解析

在当今数字化时代&#xff0c;移动应用程序成为我们生活中必不可少的一部分。特别是在医疗领域&#xff0c;移动应用程序的需求更为迫切。为了满足这一需求&#xff0c;开发一个医疗小程序成为了许多医疗机构的优先选择。 在本文中&#xff0c;我们将分享一个实战攻略&#xff…

iOS开发Swift-5-自动布局AutoLayout-摇骰子App

1.在iOS坐标系中&#xff0c;以向左、向下为正方向。图片以左上角为基准点。 2.打开之前的摇骰子App&#xff0c;对它的界面做一些适应所有iPhone机型的效果。 3.先对上方logo做一个y轴约束和一个宽高约束。 宽高约束&#xff1a; 水平居中&#xff1a; 对y轴进行约束。将虚线点…

数据变化监听实现

前言 今天纯粹是无聊随便看看,然后发现有个好东西,可能可以用于某些数据变化主动监听场景搞事情.废话不多说,直接上货. 一、Binlog4j是什么 轻量级 Mysql Binlog 客户端&#xff0c;提供宕机续读&#xff0c;高可用集群等特性 二、项目特性 集群模式&#xff0c;通过集群部署…

WebDAV之π-Disk派盘 + 思源笔记

思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。 融合块、大纲和双向链接,重构你的思维。 π-Disk派盘 – 知识管理专家 派盘是一款面向个人和企业的本地云存储解决方案,它可以帮助用户打造“数字第二大脑”,并支持KMS知识管理系…

Vector Search with OpenAI Embeddings: Lucene Is All You Need

本文是LLM系列文章&#xff0c;针对《Vector Search with OpenAI Embeddings: Lucene Is All You Need》的翻译。 使用OpenAI嵌入的向量搜索&#xff1a;Lucence是你所需的一切 摘要1 引言2 从架构到实现3 实验4 讨论5 结论 摘要 我们在流行的MS MARCO文章排名测试集上使用Lu…

专访远航汽车远勤山:踏踏实实做好产品 直面挑战乘风远航

8月25日&#xff0c;第二十六届成都国际汽车展览会在中国西部国际博览城隆重开幕。车展举办期间&#xff0c;远航汽车董事长远勤山先生、产品研发总监王震先生向媒体分享了远航汽车品牌发展、产品研发、技术创新以及市场布局等内容。 “通过我们的付出和努力&#xff0c;让我们…

全网最新最全软件测试工程师面试题,看完金九银十还怕拿不到offer?

与开发工程师相比&#xff0c;软件测试工程师前期可能不会太深&#xff0c;但涉及面还是很广的。 在一年左右的实习生或岗位的早期面试中&#xff0c;主要是问一些基本的问题。 涉及到的知识主要包括MySQL数据库的使用、Linux操作系统的使用、软件测试框架问题、测试环境搭建问…

kafka 命令脚本说明以及在java中使用

一、命令行使用 1.1、topic 命令 1、关于topic,这里用window 来示例 bin\windows\kafka-topics.bat2、创建 first topic,五个分区&#xff0c;1个副本 bin\windows\kafka-topics.bat --bootstrap-server localhost:9092 --create --partitions 5 --replication-factor 1 -…

OpenCv读/写视频色差 方案

OpenCv read / write video color differenceOpenCv读/写视频色差 感谢博主&#xff1a; OpenCv读/写视频色差答案 - 爱码网 有没有办法让 OpenCV 使用正确的转换&#xff1f;&#xff1f; 是的&#xff0c;使用 GStreamer 后端而不是 FFmpeg 后端&#xff0c;颜色看起来很完…

本地缓存、Redis数据缓存策略

目录 需求看似简单&#xff0c;一取一传但是&#xff0c;又出现了一个新的问题&#xff0c;数据丢了。 一、缓存缓存有哪些分类&#xff1a; 二、分析一下本地缓存的优势三、本地缓存解决方案&#xff1f;1、基于Guava Cache实现本地缓存2、基于Caffeine实现本地缓存3、基于Enc…

无涯教程-Flutter - Dart简介

Dart是一种开源通用编程语言&#xff0c;它最初是由Google开发的&#xff0c; Dart是一种具有C样式语法的面向对象的语言&#xff0c;它支持诸如接口&#xff0c;类之类的编程概念&#xff0c;与其他编程语言不同&#xff0c;Dart不支持数组&#xff0c; Dart集合可用于复制数据…

来和稚晖君做同事,校招内推、社招、实习

先上校招官网投递链接和内推码。 投递链接&#xff1a;http://www.agibot.com/ 我的内推码&#xff1a;MVKRCCW 智元机器人开始校招了&#xff0c;众多岗位如下&#xff1a; 公司正在不断发展壮大中&#xff0c;需要优秀的毕业生加入&#xff0c;一块来搞点有意思的事情。稚…

访问 GitHub 方法

访问 GitHub 方法 方法一&#xff1a;最常见的就是 fq&#xff0c;但这个是违法的行为&#xff0c;自己私下搞可以&#xff0c;不能教你们。 方法二&#xff1a;利用加速器&#xff0c;这是正规合法操作。这里推荐一个免费的加速器&#xff0c;下载安装 Watt Toolkit加速器,原名…

spark支持深度学习批量推理

背景 在数据量较大的业务场景中&#xff0c;spark在数据处理、传统机器学习训练、 深度学习相关业务&#xff0c;能取得较明显的效率提升。 本篇围绕spark大数据背景下的推理&#xff0c;介绍一些优雅的使用方式。 spark适用场景 大数据量自定义方法处理、类sql处理传统机器…

1+X智慧安防系统实施与运维技能等级证产教融合基地建设方案

一、系统概述 1X智慧安防系统实施与运维技能等级证产教融合体系统融合了产业需求、教育培训和技能认证&#xff0c;通过课程培训、实训基地和实习实训等方式培养学员的技能水平&#xff0c;并通过技能认证来评估其能力&#xff0c;以满足智慧安防行业对人才的需求&#xff0c;并…