来来来,带你实现最炫酷的卡片效果

📢 鸿蒙专栏:想学鸿蒙的,冲

📢 C语言专栏:想学C语言的,冲

📢 VUE专栏:想学VUE的,冲这里

📢 CSS专栏:想学CSS的,冲这里

📢 Krpano专栏:想学VUE的,冲这里

🔔 上述专栏,都在不定期持续更新中!!!!!!!!!!!!!

✨ 前言

        CSS卡片效果是一种使用CSS技术来制作类似卡片的网页元素的方法。卡片是一种常见的网页设计模式,它可以展示各种类型的内容,如图片、文字、链接、按钮等。卡片通常有一定的大小和形状,可以在网页中排列和对齐。卡片还可以添加一些视觉效果,如阴影、圆角、悬浮、翻转等,来增强用户的体验和交互。

本文将介绍如何使用CSS创建卡片,包括以下几个方面:

  • 如何使用CSS的基本属性,如box-shadowborder-radiustransition等,来设置卡片的样式和动画。
  • 如何使用CSS的布局属性,如displaygridflex等,来控制卡片的位置和排列。
  • 如何使用CSS的媒体查询和响应式设计,来适应不同的屏幕尺寸和设备。
  • 如何使用CSS的伪元素和伪类,如::before::after:hover等,来添加一些额外的效果和功能。

来看一下效果:

废话不多说,直接上代码:

1、HTML: 

<div class="card"><div class="heading">Join the Open-Source <span>Galaxy</span></div><div class="content"><div class="item item--create"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z" fill="currentColor"></path></svg><span>Create</span></div><div class="item item--post"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z" fill="currentColor"></path></svg><span>Post</span></div><div class="item item--inspire"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z" fill="currentColor"></path></svg><span>Inspire</span></div></div><button>Code to Infinity!</button>
</div>

2、CSS:

.card {height: 300px;width: 220px;padding: 15px;position: relative;background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);background-size: 200% 200%;animation: cosmic 10s ease-in-out infinite;box-sizing: border-box;transform: skewY(-5deg);transition: all 0.3s;display: flex;flex-direction: column;justify-content: flex-end;gap: 50px;align-items: center;
}.card::before {content: '';width: 10px;height: 300px;background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);background-size: 200% 200%;animation: cosmic 10s ease-in-out infinite;position: absolute;top: 0px;left: -9.5px;transform-origin: right;transform: skewY(45deg);border: none;transition: all 0.5s;
}.card::after {content: '';height: 10px;width: 220px;background: linear-gradient(to top, rgba(0, 0, 0, 0.825), rgba(247, 28, 200, 0.13)),radial-gradient(circle at 0%, rgba(172, 56, 187, 0.329), rgba(121, 21, 179, 0.521) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(33, 10, 54, 0.236) 75%),radial-gradient(circle at 100%, rgba(171, 0, 238, 0.329), rgba(13, 115, 231, 0.514) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),radial-gradient(circle at 100% 0%, rgba(5, 5, 5, 0.329), rgb(226, 226, 231) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.161) 75%),radial-gradient(circle at 0% 100%, rgba(45, 10, 173, 0.541), rgba(178, 22, 245, 0.805) 50%, rgba(37, 26, 26, 0.432) 75%, rgba(51, 51, 51, 0.315) 75%),radial-gradient(closest-side, #3f87a646, #ebf8e13d, #3cd1f654),linear-gradient(315deg, rgba(212, 212, 207, 0.74) 3%, rgb(11, 12, 12) 38%, rgba(16, 24, 23, 0.301) 68%, rgba(166, 168, 173, 0.942) 98%);background-size: 200% 200%;animation: cosmic 10s ease-in-out infinite;position: absolute;top: -9.5px;left: 0px;transform-origin: bottom;transform: skewX(45deg);transition: all 0.5s;box-shadow: -310px 315px 6px rgba(36, 4, 41, 0.5);
}@keyframes cosmic {0% {background-position: 0% 0%;}50% {background-position: 100% 100%;}100% {background-position: 0% 0%;}
}.card:hover {transform: skewY(0deg);
}.card:hover::before {width: 0px;height: 300px;left: 0;top: 0.1px;
}.card:hover::after {width: 220px;height: 0px;left: 0.1px;top: 0;border: none;
}.card > *:not(.heading) {opacity: 0;
}.card .heading {width: 200px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;transition: 0.7s;color: #fff;font-size: 17px;font-weight: 500;
}.card .heading span {font-weight: 700;letter-spacing: 1.5px;animation: flickering 3s linear infinite;
}.card .heading span::before {content: '☞';position: absolute;top: 40px;left: 40%;transform: rotate(-90deg);font-size: 30px;transition: all 0.5s;
}.card:hover .heading span::before {transform: rotate(90deg);left: 45%;
}@keyframes flickering {0% {opacity: 1;}50% {opacity: 1;}52% {opacity: 1;}54% {opacity: 0;}56% {opacity: 1;}90% {opacity: 1;}92% {opacity: 0;}94% {opacity: 1;}96% {opacity: 0;}98% {opacity: 1;}99% {opacity: 0;}100% {opacity: 1;}
}.card:hover .heading {top: 13%;
}.card:hover > *:not(.heading) {animation: fadeIn 1s ease 0.5s forwards;
}@keyframes fadeIn {to {opacity: 1;}
}.card .content {display: flex;flex-direction: column;gap: 10px;color: #fff;
}.card .content .item {border-radius: 0px 5px 0 5px;cursor: pointer;display: flex;gap: 15px;transition: all 0.5s;background-color: rgba(0, 0, 0, 0.2);padding: 2px 30px;justify-content: start;align-items: center;
}.card .content .item:hover {background-color: rgba(0, 0, 0, 0.4);
}.content .item--create:hover svg {animation: create 4s infinite;stroke: #DB0F5A;
}@keyframes create {0% {transform: translateX(1px);}10% {transform: translateX(-1px);}20% {transform: translateX(1px);}30% {transform: translateX(-1px);}40% {transform: translateX(1px);}50% {transform: translateX(-1px);}60% {transform: translateX(1px);}70% {transform: translateX(-1px);}80% {transform: translateX(1px);}90% {transform: translateX(-1px);}100% {transform: translateX(1px);}
}.content .item--post:hover svg {animation: rocket 1s infinite;stroke: #DB0F5A;
}@keyframes rocket {0% {transform: rotate(0deg);}10% {transform: rotate(-2deg);}20% {transform: rotate(2deg);}30% {transform: rotate(-2deg);}40% {transform: rotate(2deg);}50% {transform: rotate(-2deg);}60% {transform: rotate(2deg);}70% {transform: rotate(-2deg);}80% {transform: rotate(2deg);}90% {transform: rotate(-2deg);}100% {transform: rotate(2deg);}
}.content .item--inspire:hover svg {animation: inspire 2s infinite;stroke: #DB0F5A;
}@keyframes inspire {0% {transform: scale(1);}10% {transform: scale(0.97);}20% {transform: scale(1.03);}30% {transform: scale(1);}40% {transform: scale(0.97);}50% {transform: scale(1.03);}60% {transform: scale(1);}70% {transform: scale(0.97);}80% {transform: scale(1.03);}90% {transform: scale(1);}100% {transform: scale(0.97);}
}button {cursor: pointer;border-radius: 0px 5px 0 5px;height: 30px;width: calc(100% + 50px);position: relative;border: none;transition: 0.2s;background-color: #CC014D;color: #fff;text-align: center;font-size: 17px;z-index: 0 !important;
}.content::before {content: '';position: absolute;bottom: 5px;border: 15px solid #DB0F5A;right: -30px;border-right-color: transparent;pointer-events: none;z-index: -1;
}.content::after {content: '';position: absolute;border-style: solid;bottom: 5px;right: -10px;border-width: 10px 10px 0 0;border-color: #6B043A transparent transparent transparent;
}button:hover {letter-spacing: 1px;
}button:active {transform: translateY(1px);
}

 写完~ 哇~ 这个博主好良心,我要给他评论、点赞、收藏

✨ 结语

结语也不写了!(主要是脑子枯竭了)

我们改日再会~~~~~

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

掌汇云 | 公司库聚合企业,为垂直领域提供产品与服务展示窗口

11月29日晚&#xff0c;拼多多美股盘中市值首次超越阿里巴巴。拼多多是赢了&#xff0c;但也有人说阿里未必就输了&#xff0c;因为阿里拼的是整个阿里生态。 阿里生态使其庞大且屹立不倒&#xff0c;拼多多将社交用于撮合交易&#xff0c;通过平台连接消费者和供应商&#xf…

【没有哪个港口是永远的停留~论文简读】HRNet+OCR

一、Deep High-Resolution Representation Learning for Human Pose Estimation &#xff08;HRNet&#xff09; 论文&#xff1a;https://arxiv.org/pdf/1902.09212.pdf 代码&#xff1a;https://github.com/leoxiaobin/deep-high-resolution-net.pytorch 二、Deep high-res…

JVM篇:JVM的简介

JVM简介 JVM全称为Java Virtual Machine&#xff0c;翻译过来就是java虚拟机&#xff0c;Java程序&#xff08;Java二进制字节码&#xff09;的运行环境 JVM的优点&#xff1a; Java最大的一个优点是&#xff0c;一次编写&#xff0c;到处运行。之所以能够实现这个功能就是依…

ctf_show(web入门笔记)持续更新中

信息收集 1-2&#xff1a;查看源代码 3&#xff1a;bp抓包 4&#xff1a;robots.txt&#xff08;这个文件里会写有网站管理者不想让爬虫的页面或其他&#xff09; 5&#xff1a;网站源代码泄露index.phps 6&#xff1a;同样也是源码泄露&#xff0c;&#xff08;拿到以后还…

C++力扣题目347--前k个高频元素

给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例 1: 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2]示例 2: 输入: nums [1], k 1 输出: [1] 提示&#xff1a; 1 < nums.length < 105k 的取…

别再写一堆的 for 循环了!Java 8 中的 Stream 轻松遍历树形结构,是真的牛逼!

可能平常会遇到一些需求&#xff0c;比如构建菜单&#xff0c;构建树形结构&#xff0c;数据库一般就使用父id来表示&#xff0c;为了降低数据库的查询压力&#xff0c;我们可以使用Java8中的Stream流一次性把数据查出来&#xff0c;然后通过流式处理。 我们一起来看看&#x…

Nginx直播服务器搭建及推拉流测试

文章目录 前言一、搭建 Nginx 直播服务器1、安装 Nginx 依赖2、下载并解压源码①、下载并解压 nginx-http-flv-module 直播模块源码②、下载并解压 Nginx 源码 3、编译安装4、配置 rtmp 服务①、添加 rtmp 服务②、验证配置 二、推流、拉流测试1、ffmepg 推流2、VLC 拉流 前言 …

案例224:基于微信小程序的餐厅点餐系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

基于Java Swing的图书管理系统

一、项目总体架构 本项目基于Java Swing框架&#xff0c;数据库采用的是MySQL。项目文件夹如下&#xff1a; 二、项目截图 1.登录和注册界面 2.用户界面 3.管理员管理图书类别 4.管理员管理书籍 5.管理员管理用户 项目总体包括源代码和课程论文&#xff0c;需要源码的…

OCP NVME SSD规范解读-3.NVMe管理命令-part2

NVMe-AD-8&#xff1a;在某些情况下&#xff08;如Sanitize命令、Format NVM命令或TCG Revert方法后数据被清除&#xff09;&#xff0c;设备应允许读取已清除的LBAs而不产生错误&#xff0c;并在最后一次清除完成后&#xff0c;对未写入LBAs的读取返回所有零值给主机 NVMe-AD…

教育数字化:重塑新时代教育模式及教育理念

2023年&#xff0c;是加快教育强国建设新篇章的重要一年。在这一年里&#xff0c;ChatGTP、教育数字化、自主学习等成为年度教育热词&#xff0c;“教育数字化”&#xff0c;不仅是今年教育发展的关键词&#xff0c;同时也是重塑新时代教育模式及理念的基础。 2023年2月&#…

IPEmotion数据采集软件功能介绍

IPEmotion作为IPETRONIK的软件产品&#xff0c;主要应用于车辆测试和不同的实验室测试系统&#xff0c;能够满足各种测量需求。通过专业化的数据采集软件IPEmotion&#xff0c;我们可实现完整的数据采集过程&#xff0c;包括&#xff1a;配置数据采集设备&#xff1b;使用不同的…

C语言实现RSA算法加解密

使用c语言实现了RSA加解密算法&#xff0c;可以加解密文件和字符串。 rsa算法原理 选择两个大素数p和q&#xff1b;计算n p * q;计算φ(n)(p-1)(q-1)&#xff1b;选择与φ(n)互素的整数d&#xff1b;由de1 mod φ(n)计算得到e&#xff1b;公钥是(e, n), 私钥是(d, n);假设明…

c# listbox 添加图标和文字

给listbox 添加 DrawItem 事件 private void listBox1_DrawItem(object sender, DrawItemEventArgs e){int index e.Index;//获取当前要进行绘制的行的序号&#xff0c;从0开始。Graphics g e.Graphics;//获取Graphics对象。Rectangle bound e.Bounds;//获取当前要绘制的行的…

CorelCAD各版本安装指南

下载链接 https://pan.baidu.com/s/1v0VgYRaaRRUeAgJC__0rPw?pwd0531 1.鼠标右击【CorelCAD2023(64bit)】压缩包&#xff08;win11及以上系统需先点击“显示更多选项”&#xff09;选择【解压到 CorelCAD2023(64bit)】。 2.打开解压后的文件夹&#xff0c;鼠标右击【CorelCA…

Armpro脱壳软件搭建教程附源代码

PHP8.0版本&#xff0c;数据库8.0版本 1.配置注册机文件&#xff0c;打开将arm.zip/res目录下&#xff0c;mt管理器搜索将其全部修改为你自己的域名或者是服务器IP 2.然后建立数据库 数据库账号arm 数据库用户名arm 数据库密码EsZfXY4tD3h2NNA4 3.导入数据库 4.配置Redi…

TCP状态转换/ 半连接/ 端口复用代码实现

三次挥手的时候的状态转换 TCP&#xff08;Transmission Control Protocol&#xff09;的三次握手是建立TCP连接的过程。在三次握手中&#xff0c;涉及到的状态转换如下&#xff1a; Closed&#xff08;关闭状态&#xff09;&#xff1a; 初始状态&#xff0c;表示没有任何连接…

【没有哪个港口是永远的停留~论文简读】Panoptic SegFormer

Panoptic SegFormer 原文&#xff1a;https://arxiv.org/pdf/2109.03814.pdf 代码&#xff1a;GitHub - zhiqi-li/Panoptic-SegFormer: This is the official repo of Panoptic SegFormer [CVPR22] 在全景分割中&#xff0c;图像内容可分为things和stuff两类。 things是可计…

Flink1.17实战教程(第七篇:Flink SQL)

系列文章目录 Flink1.17实战教程&#xff08;第一篇&#xff1a;概念、部署、架构&#xff09; Flink1.17实战教程&#xff08;第二篇&#xff1a;DataStream API&#xff09; Flink1.17实战教程&#xff08;第三篇&#xff1a;时间和窗口&#xff09; Flink1.17实战教程&…

根据commitID删除某一次提交

1.查看提交历史 git log --prettyoneline2.找到需要删除的那个commit,然后找到上次提交的commitID 比如想要删除下面这一条 我们找到上次提交的commitID 3.执行rebase git rebase -i efa11da0a684977bf8ac047ebb803e2ded2063a4 进入编辑状态显示如下 将需要删除的那个提交前…