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

毛玻璃 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 选择器卡片悬停效果

效果展示 页面结构 从上述的效果展示可以看到&#xff0c;页面是由多个卡片组成&#xff0c;并且鼠标悬停在卡片上时&#xff0c;会旋转用户图片并且韩式对应的用户信息框。 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 采集电压点应该在靠近负载侧。这样可以减少大电流导线导致的电压差&#xff0c;真实反应输出电压值 FB_1P21采集电路靠近芯片侧&#xff0c; 2.1&#xff0c;采集分压电路上侧为Vout Vnoise, 那么一分压就噪声就小了。假如采集电路远离芯片侧&…...

计算机视觉处理的开源框架

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

最新AI智能创作系统源码AI绘画系统/支持GPT联网提问/支持Prompt应用

AI绘图专业设计 不得将程序用作任何违法违纪内容&#xff0c;不要让亲人两行泪 界面部分图解构&#xff1a; 前台show&#xff1a; 前端部署&#xff1a; 安装pm2管理器 点击设置 选择v16.19.1版本-切换版本 再新建一个网站 点击设置 添加反向代理-代理名称随便…...

2019架构真题案例(四十八)

系统应用集成构件统一标准的基础平台&#xff0c;在各个应用系统的接口之间数据共享和功能&#xff0c;基本原则是保证应用程序的&#xff08;&#xff09;。系统应用集成提供了四个不同层次的服务&#xff0c;最上层服务是&#xff08;&#xff09;。 独立性相关性互操作性排…...

zabbix自定义监控内容和自动发现

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

导引服务机器人 通用技术条件

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

今日头条文章采集ChatGPT3.5/4.0驱动浏览器改写文章软件说明文档

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

Mac系统清理工具BuhoCleaner

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

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" 上周已正式发布&#xff0c;此版本虽然有许多针对桌面环境的改进&#xff0c;但上游缺少的一个功能是 Canonical 主导的 Mutter 动态三层缓存。 动态三层缓存用于在需要时提升性能&#xff0c;并且已被证明有助于提高桌面渲染性能&#xff0c;…...

[论文笔记]Poly-encoder

引言 本文是Poly-encoder1的阅读笔记,论文题目为基于预训练模型的快速准确多句评分模型。 也是本系列第一篇基于Transformer架构的模型,对于进行句子对之间比较的任务,有两种常用的途经:Cross-encoder在句子对上进行交互完全自注意力;Bi-encoder单独地编码不同的句子。前…...

vs2022中配置PCL1.13.1(附带提供属性表.props文件)

1.下载安装配置PCL环境&#xff08;略&#xff09; 2.vs2022相关配置&#xff08;第一次配置时&#xff0c;不想手动配置的&#xff0c;直接看第3条&#xff0c;用我的.props属性表直接导入即可。&#xff09; 1&#xff09;新建一个C项目&#xff0c;右击项目&#xff0c;选择…...

基于共生生物优化的BP神经网络(分类应用) - 附代码

基于共生生物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于共生生物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码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…...

浏览器插件开发爬虫记录

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

万万没想到,我用文心一言开发了一个儿童小玩具

最近关注到一年一度的百度世界大会今年将于10月17日在北京首钢园举办&#xff0c;本期大会的主题是“生成未来&#xff08;PROMPT THE WORLD&#xff09;”。会上&#xff0c;李彦宏会做主题为「手把手教你做AI原生应用」的演讲&#xff0c;比较期待 Robin 会怎么展示。据说&am…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

23-Oracle 23 ai 区块链表(Blockchain Table)

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

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

排序算法总结(C++)

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

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...