毛玻璃 has 选择器卡片悬停效果
效果展示
页面结构
从上述的效果展示可以看到,页面是由多个卡片组成,并且鼠标悬停在卡片上时,会旋转用户图片并且韩式对应的用户信息框。
CSS3 知识点
- :has 属性的运用
实现页面整体结构
<div class="container"><div class="card" data-color="clr1"><div class="img_box"><img src="images/user-1.jpg" /></div><div class="glass"><h3>Someone<br /><span>SEO Expert</span></h3><ul><li style="--i: 1"><a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a></li><li style="--i: 2"><a href="#"><i class="fa fa-weixin" aria-hidden="true"></i></a></li><li style="--i: 3"><a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a></li><li style="--i: 4"><a href="#"><i class="fa fa-tencent-weibo" aria-hidden="true"></i></a></li></ul></div></div>
</div>
实现卡片基础样式
.container .card {position: relative;width: 200px;height: 200px;border-radius: 10px;display: flex;justify-content: center;align-items: center;transition: 0.5s;
}
实现用户头像样式
.container .card .img_box {position: absolute;inset: 0;border-radius: 12px;border: 4px solid rgba(0, 0, 0, 0.2);
}.container .card .img_box img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: 0.5s;border-radius: 10px;
}.container .card:hover .img_box img {opacity: 0.5;
}
实现用户信息框样式
.container .card .glass {position: absolute;inset: 0;background: linear-gradient(#fff2, transparent);border: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 15px 15px rgba(0, 0, 0, 0.25);backdrop-filter: blur(15px);border-radius: 10px;scale: 0;display: flex;flex-flow: row wrap;justify-content: center;align-items: center;overflow: hidden;opacity: 0;transition: 0.5s;
}.container .card .glass::before {content: "";display: block;position: absolute;bottom: 0;width: 100%;height: 50px;background: rgba(255, 255, 255, 0.05);
}.container .card ul {position: absolute;bottom: 14px;width: 100%;display: flex;justify-content: center;gap: 15px;
}.container .card ul li {list-style: none;
}.container .card ul a {color: #fff8;font-size: 1.25em;scale: 0;transition: 0.25s;transition-delay: scale calc(0.2s * var(--i));
}.container .card:hover ul a {scale: 1;
}.container .card ul a:hover {color: #fff;
}
实现对应的悬停样式
.container .card:hover .img_box img {opacity: 0.5;
}.container .card:hover {transform: rotate(-15deg);
}.container .card:hover .glass {scale: 1;opacity: 1;transform: rotate(20deg);
}
使用 has 属性修改背景颜色
body:has(.card[data-color="clr1"]:hover) {background: #d18c55;
}body:has(.card[data-color="clr2"]:hover) {background: #fff6a3;
}body:has(.card[data-color="clr3"]:hover) {background: #eeb973;
}body:has(.card[data-color="clr4"]:hover) {background: #f7f3ea;
}
完整代码下载
完整代码下载
相关文章:

毛玻璃 has 选择器卡片悬停效果
效果展示 页面结构 从上述的效果展示可以看到,页面是由多个卡片组成,并且鼠标悬停在卡片上时,会旋转用户图片并且韩式对应的用户信息框。 CSS3 知识点 :has 属性的运用 实现页面整体结构 <div class"container"><div…...
[hive]解决group by 字段超过系统规定64个
用开窗函数即可 ( row_number() over(partition by col1,...,col70 oder by xx) rn ) where rn1...
生成老年人的声音sox
sox laoren1.wav laoren2.wav pitch -300...

DC2DC电源设计注意事项--1,Feedback
电源采集图如下图 Feedback 采集电压点应该在靠近负载侧。这样可以减少大电流导线导致的电压差,真实反应输出电压值 FB_1P21采集电路靠近芯片侧, 2.1,采集分压电路上侧为Vout Vnoise, 那么一分压就噪声就小了。假如采集电路远离芯片侧&…...

计算机视觉处理的开源框架
计算机视觉是一门涉及图像和视频分析的领域,有许多开源的框架和库可用于构建计算机视觉应用程序。以下是一些常见的计算机视觉开源框架及其特点,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合…...

最新AI智能创作系统源码AI绘画系统/支持GPT联网提问/支持Prompt应用
AI绘图专业设计 不得将程序用作任何违法违纪内容,不要让亲人两行泪 界面部分图解构: 前台show: 前端部署: 安装pm2管理器 点击设置 选择v16.19.1版本-切换版本 再新建一个网站 点击设置 添加反向代理-代理名称随便…...
2019架构真题案例(四十八)
系统应用集成构件统一标准的基础平台,在各个应用系统的接口之间数据共享和功能,基本原则是保证应用程序的()。系统应用集成提供了四个不同层次的服务,最上层服务是()。 独立性相关性互操作性排…...

zabbix自定义监控内容和自动发现
6 目录 一、自定义监控内容: 1.明确需要执行的 linux 命令 2.创建 zabbix 的监控项配置文件,用于自定义 key: 3. 在 Web 页面创建自定义监控项模板: 3.1 创建模板: 3.2 创建监控项: 3.3 创建触发器&#…...

导引服务机器人 通用技术条件
声明 本文是学习GB-T 42831-2023 导引服务机器人 通用技术条件. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 6 检验规则 6.1 检验项目 检验分为型式检验和出厂检验。检验项目见表2。 表 2 检验项目 序号 检验项目 技术要求 检验方法 出厂检验 型…...

今日头条文章采集ChatGPT3.5/4.0驱动浏览器改写文章软件说明文档
大家好了,我是淘小白~ 今天给大家介绍的软件是一个款驱动浏览器改写文章的软件,下面给大家做一下介绍说明: 一、软件语言 Python编写的,使用的库是selenium库 二、具体逻辑 1、整理头条文章网址,需要自己整理&…...

Mac系统清理工具BuhoCleaner
BuhoCleaner是一款在Mac电脑上运行的清洁软件。它的界面简洁,易于使用,能够快速扫描Mac电脑上的垃圾文件、重复文件、大型文件等,帮助用户清理不需要的文件,释放磁盘空间。 该软件的主要功能包括: 垃圾文件清理&…...

SpringBoot集成WebSocket讲解
文章目录 1 WebSocket1.1 简介1.2 WebSocket作用和调用1.2.1 作用1.2.2 js端调用 1.3 Javax1.3.1 服务端1.3.1.1 服务端接收1.3.1.2 服务端集成1.3.1.3 ping和pong消息 1.3.2 客户端1.3.2.1 客户端接收1.3.2.2 客户端发送 1.4 WebMVC1.4.1 服务端1.1.4.1 服务端接收1.1.4.2 服务…...

GNOME 45 动态三层缓存补丁更新
导读GNOME 45 "Rīga" 上周已正式发布,此版本虽然有许多针对桌面环境的改进,但上游缺少的一个功能是 Canonical 主导的 Mutter 动态三层缓存。 动态三层缓存用于在需要时提升性能,并且已被证明有助于提高桌面渲染性能,…...
[论文笔记]Poly-encoder
引言 本文是Poly-encoder1的阅读笔记,论文题目为基于预训练模型的快速准确多句评分模型。 也是本系列第一篇基于Transformer架构的模型,对于进行句子对之间比较的任务,有两种常用的途经:Cross-encoder在句子对上进行交互完全自注意力;Bi-encoder单独地编码不同的句子。前…...

vs2022中配置PCL1.13.1(附带提供属性表.props文件)
1.下载安装配置PCL环境(略) 2.vs2022相关配置(第一次配置时,不想手动配置的,直接看第3条,用我的.props属性表直接导入即可。) 1)新建一个C项目,右击项目,选择…...

基于共生生物优化的BP神经网络(分类应用) - 附代码
基于共生生物优化的BP神经网络(分类应用) - 附代码 文章目录 基于共生生物优化的BP神经网络(分类应用) - 附代码1.鸢尾花iris数据介绍2.数据集整理3.共生生物优化BP神经网络3.1 BP神经网络参数设置3.2 共生生物算法应用 4.测试结果…...

GIN框架路由的实现原理
文章目录 首先回顾一下gin框架的路由如何使用的从源码分析一下gin框架gin的路由实现前缀树前缀树的实现压缩前缀树--Radix TrieTrie VS Map 首先回顾一下gin框架的路由如何使用的 package mainimport ("fmt""github.com/gin-gonic/gin""net/http&quo…...

Android Studio版本升级后的问题 gradle降级、jdk升级
Cannot use TaskAction annotation on method IncrementalTask.taskAction$gradle_core() because interface org.gradle.api.tasks.incremental.IncrementalTaskInputs is not a valid parameter to an action method. 修改下面两处地方分别为7.0.3、7.3.3Android Gradle plu…...

浏览器插件开发爬虫记录
常用爬虫有各种各样的反爬限制,而如果是小数据量并且该网站反爬手段非常厉害的前提下,可以考虑使用浏览器插件作为爬虫手段 基本代码来源于这位博主分享的插件代码, 主要在他的基础上加了 请求代理、管理面板、脚本注入拦截到的请求数据和管…...

万万没想到,我用文心一言开发了一个儿童小玩具
最近关注到一年一度的百度世界大会今年将于10月17日在北京首钢园举办,本期大会的主题是“生成未来(PROMPT THE WORLD)”。会上,李彦宏会做主题为「手把手教你做AI原生应用」的演讲,比较期待 Robin 会怎么展示。据说&am…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...

23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...

《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...

排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)
前言: 双亲委派机制对于面试这块来说非常重要,在实际开发中也是经常遇见需要打破双亲委派的需求,今天我们一起来探索一下什么是双亲委派机制,在此之前我们先介绍一下类的加载器。 目录 编辑 前言: 类加载器 1. …...