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

毛玻璃员工卡片悬停效果

效果展示

在这里插入图片描述

页面结构组成

通过效果展示图,我们可以看出页面布局比较常规,最核心的就是卡片,当鼠标没有悬停在卡片上时,文字和头像处于半透明状态,当鼠标悬停在卡片上是,底部会展示社交图标。

CSS 知识点

  • backdrop-filter 回顾
  • transition
  • transform

实现卡片基础布局

<div class="container"><div class="card"><div class="content"><div class="img_box"><img src="./images/user-1.jpg" /></div><div class="content_box"><h3>someone famous<br /><span>creative designer</span></h3></div></div><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>

实现卡片样式

.container .card {position: relative;width: 300px;height: 400px;background: rgba(255, 255, 255, 0.05);margin: 20px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);border-radius: 15px;display: flex;justify-content: center;align-items: center;backdrop-filter: blur(10px);
}.container .card .content {position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;opacity: 0.5;transition: 0.5s;
}.container .card:hover .content {opacity: 1;transform: translateY(-20px);
}.container .card .content .img_box {position: relative;width: 150px;height: 150px;border-radius: 50%;overflow: hidden;border: 10px solid rgba(0, 0, 0, 0.25);
}

实现社交图标动画

.container .card ul {position: absolute;bottom: 80px;display: flex;
}.container .card ul li {list-style: none;margin: 0 10px;transform: translateY(50px);transition: 0.5s;transition-delay: calc(0.1s * var(--i));opacity: 0;
}.container .card:hover ul li {/* 动画执行部分 */transform: translateY(30px);opacity: 1;
}

完整代码下载

完整代码下载

相关文章:

毛玻璃员工卡片悬停效果

效果展示 页面结构组成 通过效果展示图&#xff0c;我们可以看出页面布局比较常规&#xff0c;最核心的就是卡片&#xff0c;当鼠标没有悬停在卡片上时&#xff0c;文字和头像处于半透明状态&#xff0c;当鼠标悬停在卡片上是&#xff0c;底部会展示社交图标。 CSS 知识点 b…...

闪存工作原理

前言 1、闪存类型 闪存有两种分类&#xff0c;NAND型闪存主要用于存储 2、MOS的特性 MOS管的三个引脚分别是Gate&#xff08;G&#xff09;、Source&#xff08;S&#xff09;和Drain&#xff08;D&#xff09;。Gate&#xff08;G&#xff09;引脚是晶闸管的控制引脚&…...

从0到一配置单节点zookeeper

我的软件&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1nImkjOgzPkgaFOuUPwd1Sg?pwd2wqo 提取码&#xff1a;2wqo 视频教程p1-zookeeper安装和配置以及启动服务和检测是否运行成功_哔哩哔哩_bilibili 一、安装zookeeper http://zookeeper.apache.org/releases.h…...

【JVM】第三篇 JVM对象创建与内存分配机制深度剖析

目录 一. JVM对象创建过程详解1. 类加载检查2. 分配内存2.1 如何划分内存?2.2 并发问题3. 初始化4. 设置对象头5. 执行<init>方法二. 对象头和指针压缩详解三. JVM对象内存分配详解四.逃逸分析 & 栈上分配 & 标量替换详解1. 逃逸分析 & 栈上分配2. 标量替换…...

【信创】麒麟v10(arm)-mysql8-mongo-redis-oceanbase

Win10/Win11 借助qume模拟器安装arm64麒麟v10 前言 近两年的国产化进程一直在推进&#xff0c;基于arm架构的国产系统也在积极发展&#xff0c;这里记录一下基于麒麟v10arm版安装常见数据库的方案。 麒麟软件介绍: 银河麒麟高级服务器操作系统V10 - 国产操作系统、银河麒麟、中…...

maven settings.xml文件(包含了配置阿里云镜像)

mac 的 settings.xml 我配置的位置是&#xff1a; /Applications/IntelliJ IDEA.app/Contents/plugins/maven/lib/maven3/conf/settings.xml 然后 local repository 我配置的位置是&#xff1a; /Applications/IntelliJ IDEA.app/Contents/plugins/maven/lib/maven3/conf/repos…...

分类预测 | MATLAB实现WOA-FS-SVM鲸鱼算法同步优化特征选择结合支持向量机分类预测

分类预测 | MATLAB实现WOA-FS-SVM鲸鱼算法同步优化特征选择结合支持向量机分类预测 目录 分类预测 | MATLAB实现WOA-FS-SVM鲸鱼算法同步优化特征选择结合支持向量机分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLAB实现WOA-FS-SVM鲸鱼算法同步优化特征选择结…...

Redis是否要分库的实践

Redis的分库其实没有带来任何效率上的提升&#xff0c;只是提供了一个命名空间&#xff0c;而这个命名空间可以完全通过key的设计来避开这个问题。 一个优雅的Redis的key的设计如下...

String 进阶

字符串拼接 // 常量与常量的拼接结果放在常量池 // 常量池中不会存在相同的常量 String str1 "a" "b"; System.out.println(str1 "ab");// 拼接时有一个为变量&#xff0c;则结果会放在堆中。 // 变量拼接的原理是 StringBuilder append 最后…...

ESP32设备通信-两个ESP32间UART通信

两个ESP32间UART通信 文章目录 两个ESP32间UART通信1、UART介绍2、软件准备3、硬件准备4、代码实现在本文中,我们将使用 Arduino IDE 的 UART 硬件库在两个 ESP32 板之间执行 UART 或串行通信。 要使用 USB 端口调试和编程 ESP32,需要使用称为通用异步接收器/发送器 (UART) 通…...

LCR 052.递增顺序搜索树

​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;LCR 052. 递增顺序搜索树 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 中序遍历时修改指针即可。 解题代码&#xff1a; /*** Definition for a binary tree node.* public class TreeNo…...

Mysql集群技术问答

前提&#xff1a;Mysql集群服务部署到一个群组的所有服务器上&#xff0c;一般20台为一个群组&#xff0c;群组内所有节点数据实时同步&#xff0c;动态自动维护节点。 问&#xff1a;集群空间跟传统空间的最大不同是什么&#xff1f; 答&#xff1a;集群空间有数据同步和宕机检…...

2023版 STM32实战4 滴答定时器精准延时

SysTick简介与特性 -1- SysTick属于系统时钟。 -2- SysTick定时器被捆绑在NVIC中。 -3- SysTick可以产生中断,且中断不可屏蔽。 SysTick的时钟源查看 通过时钟树可以看出滴答的时钟最大为72MHZ/89MHZ 通过中文参考手册也可以得到这个结论 代码编写&#xff08;已经验证&a…...

ESP32设备驱动-数据持久化到Flash

数据持久化到Flash 文章目录 数据持久化到Flash1、Preferences库介绍2、软件准备3、硬件准备4、代码实现4.1 初始化NVS Flash4.2 读写Key/Value对4.3 保存/读取网络凭据4.4 复位后记住最后的 GPIO 状态在本文中,我们将介绍如何使用 Preferences库将数据存储到 ESP32 的Flash中…...

Swift data范围截取问题

文章目录 一、截取字符串的几种方法1. 截取前几位2. 截取后几位3. subData4. 下标截取 二、subData(in:) 报错 EXC_BREAKPOINT 一、截取字符串的几种方法 1. 截取前几位 mobileID.prefix(32)2. 截取后几位 mobileID.suffix(3)3. subData data.subdata(in: 0..<4)4. 下标…...

PICO首届XR开发者挑战赛正式启动,助推行业迈入“VR+MR”新阶段

9月25日&#xff0c;“PICO 2023首届XR开发者挑战赛”&#xff08;下文简称“挑战赛”&#xff09;媒体启动会在北京圆满落幕&#xff0c;官方赛事报名通道已于今日开启。据悉&#xff0c;本次挑战赛是PICO首次针对全球开发者举办的大型挑战赛事&#xff0c;旨在与开发者保持连…...

【计算机网络】应用层协议原理

文章目录 网络应用程序体系结构客户-服务器体系结构P2P体系结构 进程通信客户和服务器进程进程与计算机网络之间的接口进程寻址 可供应用程序使用的运输服务可靠数据传输吞吐量定时安全性 因特网提供的运输服务TCP服务面向连接的服务可靠数据传输服务TCP安全 UDP服务因特网运输…...

buuctf-[WUSTCTF2020]CV Maker

打开环境 随便登录注册一下 进入到了profile.php 其他没有什么页面&#xff0c;只能更换头像上传文件&#xff0c;所以猜测是文件上传漏洞 上传一句话木马看看 <?php eval($_POST[a]);?>回显 搜索一下 添加文件头GIF89a。上传php文件 查看页面源代码&#xff0c;看…...

数据库表操作详解

在数据库管理中,表操作是最基础也最常用的一项功能。不论是临时存储一些数据,还是通过派生表进行复杂的查询,表操作的灵活性和多样性都使其在数据库中发挥着重要的作用。 本文将详细解析数据库中常见的表操作,包括临时表、派生表以及与视图、子查询的比较。我们将使用游戏…...

axios配置代理ip

axios配置代理ip 对于在nodejs中使用axios作为请求库时&#xff0c;有需要配置代理ip的需求&#xff08;比如爬虫等等&#xff09; 最离谱的是&#xff0c;在网上搜了一圈&#xff0c;全是关于axios配置proxy跨域的解决办法&#xff0c;没有配置代理ip的方法。 const axios …...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...