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

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

效果展示

在这里插入图片描述

CSS 知识点

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

整体页面布局实现

<div class="container">
  <h3>Popular Creator Rank List</h3>
  <!-- 用户列表容器 -->
  <div class="box">
    <!-- 这里只是展示一个用户数据 -->
    <div class="list">
      <div class="imgBx">
        <img
          src="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;
}

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

完整代码下载

完整代码下载

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于SpringBoot+Vue的健身教练预约管理系统(源码+文档+部署+讲解)

一.系统概述 私人健身与教练预约管理系统&#xff0c;可以摆脱传统手写记录的管理模式。利用计算机系统&#xff0c;进行用户信息、管理员信息的管理&#xff0c;其中包含首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;教练管理&#xff0c;健身项目管理&#xff0…

【个人使用推荐】联机不卡顿 小白一键部署 大厂云服务器选购指南 16G低至26 幻兽帕鲁最大更新来袭

更新日期&#xff1a;4月8日&#xff08;半年档 价格回调&#xff0c;京东云采购季持续进行&#xff09; 本文纯原创&#xff0c;侵权必究 《最新对比表》已更新在文章头部—腾讯云文档&#xff0c;文章具有时效性&#xff0c;请以腾讯文档为准&#xff01; 【腾讯文档实时更…

两款工业摄像头EPICS环境使用测试

从模拟摄像头进步到GIGE摄像头使得束斑监测系统的搭建方便多了&#xff0c;EPICS areaDetector下最开始使用的是进口的AVT的摄像头&#xff0c;后来发现海康摄像头便宜又好用&#xff0c;后来就一直使用海康的&#xff0c;MV-CA016-10GM这款在EPICS下使用一直很稳定&#xff0c…

ctfshow web入门 php特性 web140--web150plus

web140 这里用松散比较的漏洞绕过 0和字符串比较的时候就是true $code eval("return $f1($f2());"); 等于0就可以传参 POST: f1intval&f2intval查看源码 web141 if(preg_match(/^\W$/, $v3)) 是一段 PHP 代码&#xff0c;它使用了正则表达式函数 preg_mat…

【复现】畅捷通T-Plus SQL注入漏洞_68

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 畅捷T是用友畅捷通推出的一款新型互联网企业管理系统&#xff0c;T能够满足成长型小微企业对其灵活业务流程的管控需求&#xff0…

socket之UDP组播(多播)

组播也可以称之为多播这也是 UDP 的特性之一。组播是主机间一对多的通讯模式&#xff0c;是一种允许一个或多个组播源发送同一报文到多个接收者的技术。组播源将一份报文发送到特定的组播地址&#xff0c;组播地址不同于单播地址&#xff0c;它并不属于特定某个主机&#xff0c…

Enzo Life Sciences--17β-Estradiol high sensitivity ELISA kit

高灵敏ELISA试剂盒&#xff0c;可检测到低至14 pg/ml的17β-雌二醇 雌二醇(estradiol) 是由卵巢内卵泡的颗粒细胞分泌的类固醇激素&#xff0c;是主要的雌激素&#xff0c;负责调节女性特征、附属性器官的成熟和月经-排卵周期&#xff0c;促进乳腺导管系统的产生&#xff0c;有…

鸿蒙南向开发:【智能烟感】

样例简介 智能烟感系统通过实时监测环境中烟雾浓度&#xff0c;当烟雾浓度超标时&#xff0c;及时向用户发出警报。在连接网络后&#xff0c;配合数字管家应用&#xff0c;用户可以远程配置智能烟感系统的报警阈值&#xff0c;远程接收智能烟感系统报警信息。实现对危险及时报…

【大功率汽车大灯升压方案】LED恒流驱动芯片FP7208升压车灯调光应用,PWM内部转模拟,调光深度1%,无频闪顾虑,低亮无抖动

宝马X5前中排座椅宽大舒适&#xff0c;车厢内储物空间丰富。操控性能极佳&#xff0c;底盘稳扎精良。原车为氙气灯&#xff0c;其实宝马的氙气大灯配的比其他车型要好&#xff0c;照明效果是没得说的。但是不管什么灯久了都会出现光衰的情况。下面这辆宝马X5车灯已老化严重。 宝…

学习记录15-运算放大器例题1

一、例题1 图中自己加的一些声明&#xff0c;方便待会讲解&#xff08;请忽略丑。。。&#xff09; 根据虚短原则&#xff1a;U U- U 3V*(R4/(R3R4)) 3V*&#xff08;20 / (1020)) 2V U- U- -1V*(R2/(R1R2))Uo*(R1/(R1R2)) -1V*(20/30)Uo*(10/30) -2/3VUo*1/3 …

如何通过专业二手手机店ERP工具提升手机零售业绩?

在竞争激烈的手机零售市场中&#xff0c;二手手机店如何脱颖而出&#xff0c;实现业绩的稳步增长&#xff1f;途渡科技的超机系列工具提供了一个专业而全面的解决方案&#xff0c;专注于通过二手手机店ERP工具提升商家的运营效率和销售业绩。 1、数字化革新&#xff0c;开启智能…

面试经典150题——删除链表的倒数第 N 个结点

1. 题目描述 2. 题目分析与解析 这个题目整体来讲还是比较简单的&#xff0c;因此直接给出解题思路&#xff1a; 遍历链表计数 计算要删除的节点的位置 创建虚拟头节点 创建指针指向虚拟头节点 移动指针到要删除的节点的前一个节点 删除节点 返回头节点 3. 代码实现 …

四川易点慧电子商务抖音小店安全运营全攻略

在互联网时代&#xff0c;电子商务已成为人们日常生活不可或缺的一部分。抖音小店作为抖音平台上的一个重要功能&#xff0c;为众多商家提供了一个全新的销售渠道。四川易点慧电子商务有限公司&#xff08;以下简称“易点慧”&#xff09;作为业内知名的电商服务提供商&#xf…

废品回收小程序推动回收行业的发展趋势

回收在全球都是一个重要行业&#xff0c;它为全球的环保作出了重要贡献。 随着科技的不断发展创新&#xff0c;废品回收的方式也逐渐多样&#xff0c;全新的线上回收小程序也逐渐出现在大众的生活中&#xff0c;在当下的手机时代&#xff0c;线上回收也为大众提供了更加便利的…

【AIGC】通义千问生成问答数据集

好久没有更新跟实际应用相关的内容了&#xff08;主要是因为公司知识产权问题未能立即公开&#xff0c;目前只能挑选一些脱敏内容与各位分享&#xff09;&#xff0c;如标题所示本期将跟大家讲一下如何通过通义千问生成问答数据集的。 在之前使用 Autokeras 的 RNN 训练时提到…

flex:1是干嘛的

直接上图&#xff1a; flex:1实际代表的是三个属性的简写&#xff0c;如上图所示。 其中flex-grow是用来增大盒子的&#xff0c;比如&#xff0c;当子盒子的宽度小于父盒子的宽度&#xff0c;父盒子的剩余空间可以 利用flex-grow来设置子盒子增大的占比&#xff1b; flex-shri…

如何利用软文吸引用户下单?媒介盒子告诉你

数字技术的进步改变了用户的购物行为&#xff0c;他们期望能够在最短的时间内找到并购买自己需要的产品或服务。软文凭借对用户心理的深入洞察以及柔性的表现形式&#xff0c;成为企业吸引用户的关键因素&#xff0c;今天媒介盒子就来和大家聊聊&#xff1a;如何利用软文吸引用…

Unity2023使用sdkmanager命令行工具安装Android SDK

1&#xff0c;下载cmdline-tools&#xff0c;官网地址&#xff1a;https://developer.android.com/studio或者https://dl.google.com/android/repository/文件名 文件名对应版本名。例如文件名为commandlinetools-win-9862592_latest.zip 引用Android cmdline-tools 版本与其…

Linux:五种IO模型的基本认识

文章目录 IO的本质五种IO模型异步和同步 阻塞IO非阻塞IO信号驱动IO IO的本质 在之前的内容中已经结束了对于网络和操作系统的学习&#xff0c;那么回过来再继续看IO&#xff0c;什么是IO呢&#xff1f; 对于网络的学习当中&#xff0c;实际上也是一种IO&#xff0c;数据从计算…

Android Studio导入第三方so库和jar包——Android Studio

导入so库 方式一&#xff08;libs文件夹&#xff09; 将项目以【Project】的结构显示&#xff0c;将目标架构对应的so文件夹&#xff08;如下图中 的arm64-v8a&#xff09;复制粘贴到app文件下的lib文件夹中&#xff08;如下图的步骤1 2 3&#xff09; 在build.gradle&…