CSS实现热门创作者排行榜(毛玻璃效果)

CSS实现热门创作者排行榜(毛玻璃效果)

效果展示

在这里插入图片描述

CSS 知识点

  • CSS 基础知识回顾
  • filter 属性运用回顾

整体页面布局实现

<div class="container"><h3>Popular Creator Rank List</h3><!-- 用户列表容器 --><div class="box"><!-- 这里只是展示一个用户数据 --><div class="list"><div class="imgBx"><imgsrc="https://i.pinimg.com/564x/cc/45/7f/cc457fc473184cf7c595dc091fadd755.jpg"/></div><div class="content"><h2 class="rank"><small>#</small>1</h2><h4>Ricardo Flanagan</h4><p>Digital Artist</p></div></div></div>
</div>

实现用户列表框大致样式

.box {position: relative;min-width: 350px;
}.box .list {position: relative;display: flex;padding: 10px;border-radius: 10px;margin: 10px 0;cursor: pointer;transition: 0.5s;overflow: hidden;background: #fff;
}

实现上述样式后,我们只能看到大致的列表样式,因为图片尺寸大小和字体我们还没有设置。

优化用户信息卡片样式

.box .list .imgBx {position: relative;width: 60px;height: 60px;border-radius: 10px;background: #efefef;margin-right: 10px;
}.box .list .imgBx img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;
}.box .list .content {display: flex;justify-content: center;align-items: center;flex-direction: column;color: #333;
}.box .list .content .rank {position: absolute;right: -50px;color: #03a9f4;transition: 0.5s;font-size: 2em;
}.box .list .content .rank small {font-weight: 500;opacity: 0.25;
}

实现上述系统后可以看到如下的页面布局。

在这里插入图片描述

实现鼠标悬停某个用户卡片后,突出显示用户信息的效果

为了增强交互效果,可以为 .box .list 设置超出隐藏属性,因为 rank 元素采用绝对定位布局,我们把 .box .list 设置为隐藏后就会看不到编号,这样我们就可以使用:hoverright来实现进场动画。

/* 超出隐藏元素 */
.box .list {overflow: hidden;
}
/* 所有用户信息卡片添加毛玻璃效果 */
.box:hover .list {filter: blur(5px);opacity: 0.25;
}/* 当前鼠标悬停的用户信息卡片添加对应的放大样式和去除毛玻璃效果 */
.box .list:hover {box-shadow: -10px 20px 35px rgba(0, 0, 0, 0.15);filter: blur(0);opacity: 1;transform: scale(1.15);
}

实现上述效果后,具体的悬停效果如下:

在这里插入图片描述

/* 实现数字进程动画 */
.box .list:hover .content .rank {right: 20px;
}.box .list:hover .content h4 {line-height: 1.2em;font-weight: 600;
}.box .list:hover .content p {font-size: 0.75em;
}

实现上述代码后就可以完成所有效果。

完整代码下载

完整代码下载

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

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

相关文章

【剪映专业版】02软件快捷键

视频课程&#xff1a;有知公开课【剪映电脑版教程】 快捷键 苹果电脑选择Final Cut Pro X Windows电脑选择Premiere Pro 常用快捷键 更改快捷键

刷题之动态规划-子序列

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;开始刷动态规划的子序列类型相关的题目&#xff0c;子序列元素的相对位置和原序列的相对位置是一样的 动态规划5个步骤 状态表示 &#xff1a;dp数组中每一个下标对应值的含义是什么>dp[i]表示什么状态转移方程&#xf…

RuoYi-Cloud下载与运行

一、源码下载 若依官网:RuoYi 若依官方网站 鼠标放到"源码地址"上,点击"RuoYi-Cloud 微服务版"。 跳转至Gitee页面,点击"克隆/下载",复制HTTPS链接即可。 源码地址为:https://gitee.com/y_project/RuoYi-Cloud.git 点击复制 打开IDEA,选…

千万不要错过这6款能让你快速写作成长的宝藏软件…… #学习方法#AI写作

国外ChatGPT爆火&#xff0c;AI写作在国内也引起不小的瞩目&#xff0c;目前国内的AI写作工具少说也有几十上百个&#xff0c;要在这么多AI写作中找出适合自己的工具&#xff0c;一个一个尝试是不太现实的&#xff0c;所以今天就给大家推荐一些款AI写作工具。帮助你少走弯路&am…

开源AI程序员SWE-Agent的实现方法

1 引子 前几天&#xff0c;AI 编程机器人 Devin 引起了热议。传言称&#xff1a;程序员的饭碗就要丢了。这两天&#xff0c;一个类似功能的产品 SWE-Agent 开源&#xff0c;在 SWE-Bench 上实现了与 Devin 类似的效果。下面让我们来看看 AI 程序员的具体实现方法。 2 信息 地…

unicloud中文字段排序bug

db.collection(ledy-db).field( "序号,客户名称,期初余款,折扣,收款日期,收款金额,赠送金额,备注1,订单日期,订单金额,备注2,备注3,余款,老师).orderBy(客户名称).get()中文字段排序查不出数据 然后只能用使用原生云函数的sort方法来排序 云数据库聚合操作aggregate | u…

抖音电商罗盘品牌人群运营策略指南

【干货资料持续更新&#xff0c;以防走丢】 抖音电商罗盘品牌人群运营策略指南 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 抖音运营资料合集&#xff08;完整资料包含以下内容&#xff09; 目录 品牌人群运营策略&#xff0c;旨在帮助品牌通过精细化运营提…

深入理解MySQL中的utf8、utf8mb4和排序规则

在MySQL中,字符集和排序规则是两个非常重要的概念,它们决定了数据库如何存储和比较字符串数据。今天我们来探讨一下MySQL中几种常用的字符集和排序规则之间的区别和适用场景。 utf8和utf8mb4 utf8和utf8mb4都是MySQL中用于存储Unicode字符的字符集编码。但是它们有一个重要区…

sql 之 索引

索引是对数据库表中一列或多列的值进行排序的一种结构&#xff0c;使用索引可快速访问数据库表中的特定信息。 1. 什么是索引 官方上面说索引是帮助MySQL高效获取数据的数据结构&#xff0c;通俗点来说&#xff0c;数据库索引就像是是一本书的目录&#xff0c;可以直接根据页码…

深度学习笔记【订阅前必读】

一、同款pdf版本笔记使用情况 pytorch深度学习&#xff08;共计169页&#xff0c;基于本人听完B站小土堆PyTorch深度学习快速入门教程所写&#xff09; 发现这一份B站小土堆Pytorch深度学习笔记连985、211等高校同学都在使用(语雀在线版&#xff0c;笔记带评论) 二、笔记获取优…

vscode连接远程服务器一直需要输密码,但是连不上

问题&#xff1a;vscode连接远程服务器一直需要输密码&#xff0c;但是连不上。 解决办法&#xff1a;kill 掉该远程服务器&#xff0c;然后再重新连接 操作&#xff1a; windows: ctrlshiftp mac:cmdshiftp 调出指令&#xff0c;然后选择“Remote SSH:Kill Vscode Serve…

【代码随想录】day37:递增数字,监控二叉树

递增数字 def monotoneIncreasingDigits(self, n):""":type n: int:rtype: int"""# 找到不递增的位置i对应的数字k&#xff0c;前一个数字-1,后面都变为9&#xff0c;# 后序遍历nlist(str(n))for i in range(len(n)-1,0,-1):# 如果不递增if n[i]…

SpringMVC--概述 / 入门

目录 1. SpringMVC简介 2. 配置&入门 2.1. 开发环境 2.2. 创建maven工程 2.3. 手动创建 web.xml 2.4. 配置web.xml 2.4.1. 默认配置方式 2.4.2. 扩展配置方式 2.5. 创建请求控制器 2.6. 创建springMVC的配置文件 2.7. 测试 HelloWorld 2.7.1. 实现对首页的访问…

基于java+springboot+vue实现的教学辅助系统(文末源码+Lw)23-225

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&#…

如何在Linux中安装NVM(Node Version Manager)

NVM&#xff08;Node Version Manager&#xff09;是一个命令行工具&#xff0c;允许您轻松在同一台计算机上安装和管理多个版本的Node.js。它是Node.js开发者的神器&#xff0c;特别适用于需要在不同项目间切换Node.js版本的场景。下面是在Linux系统上安装NVM的详细步骤&#…

健康元 穿越周期看底色

中国创新药正在迈进2.0时代。 进入2024年之后&#xff0c;越来越多的国内创新药企开始主动调整研发管线&#xff0c;缩减研发开支&#xff0c;甚至是直接被“溢出”了市场。 在“风向标”的融资端&#xff0c;过去的2023年也是中国创新药融资市场连续第二年出现一二级市场融资…

启航IT行业:零基础者的入门指南

随着数字化转型成为全球趋势&#xff0c;IT行业的需求日益增长&#xff0c;吸引了大量寻求职业转型的人群。对于那些没有任何相关背景的人来说&#xff0c;踏入IT的大门可能看起来不易&#xff0c;但是通过一些明智的策略和持续的努力&#xff0c;实现这一跳跃并非遥不可及。以…

python教程(4更新中)

单元测试 如果你听说过“测试驱动开发”&#xff08;TDD&#xff1a;Test-Driven Development&#xff09;&#xff0c;单元测试就不陌生。 单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。 比如对函数abs()&#xff0c;我们可以编写出以下几个测…

逆向入门:为CTF国赛而战day03

今天来做几道题目。 环境准备&#xff1a;ida ,Exeinfo,万能脱壳器&#xff08;后面有写资源&#xff09; 强推&#xff0c;亲测有效CTF小工具下载整理_ctf工具御剑下载-CSDN博客 [网站BUUCTF] 目录 题目一 题目二三 题目4&#xff1a;新年快乐 题目一 easyre题解_easyr…

电脑硬件 - 硬盘

硬盘是一台电脑的数据中心&#xff0c;存放着我们用户的所有文件和数据 对于一块硬盘&#xff0c;其重要指标&#xff1a;顺序读写能力&#xff0c;随机读写能力 顺序读写影响大文件的拷贝&#xff0c;随机读写影响大量小文件的拷贝&#xff08;打开软件的快慢&#xff09; 因…