毛玻璃态卡片悬停效果
效果展示


页面结构组成
页面的组成部分主要是卡片。其中卡片的组成部分主要是包括了图片和详情。
卡片的动效是鼠标悬停在卡片上时,图片会移动到左侧,并且图片是毛玻璃效果。所以我们在布局的时候图片会采用绝对布局。而详情则是基础布局。
CSS3 知识点
- 响应式
- 绝对布局
- filte 属性的 invert 值使用
- backdrop-filter 属性
实现卡片基础布局
<div class="card"><div class="img_box"><img src="./images/Baseball.png" /></div><div class="content"><div><h3>棒球</h3><p>一种团体球类运动,由人数最少为9人的两支队伍在一个扇形的棒球场进行攻击与守备。<a href="#"></a></p></div></div>
</div>
.container .card {position: relative;display: flex;height: 250px;background: #fff;border-radius: 20px;margin: 30px 0;width: 45%;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
实现卡片图片样式
.container .card .img_box {position: absolute;top: 10px;left: 10px;background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(20px);height: calc(100% - 20px);width: calc(100% - 20px);z-index: 1;display: flex;justify-content: center;align-items: center;overflow: hidden;border: 1px solid rgba(255, 255, 255, 0.2);box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1);transition: 0.5s ease-in-out;
}.container .card .img_box img {max-width: 100px;filter: invert(1);transition: 0.5s ease-in-out;
}
添加卡片动画效果
.container .card:hover .img_box {height: 150px;width: 150px;left: -75px;top: calc(50% - 75px);border-radius: 10px;
}.container .card:hover .img_box img {max-width: 75px;
}
响应式样式添加
@media (max-width: 992px) {.container .card {width: 300px;height: auto;flex-direction: column;background: transparent;margin: -20px 0;box-shadow: none;}.container .card .img_box {position: relative;border-radius: 20px;}.container .card .img_box,.container .card:hover .img_box {width: 80%;height: 200px;top: 100px;left: 10%;}.container .card:hover .img_box {top: 80px;}.container .card .img_box img,.container .card:hover .img_box img {max-width: 100px;}.container .card .content {position: relative;width: 100%;background: #fff;box-shadow: none;border-radius: 20px;padding: 20px 40px 40px;border-top: 100px solid #fff;}
}
完整代码下载
完整代码下载
相关文章:
毛玻璃态卡片悬停效果
效果展示 页面结构组成 页面的组成部分主要是卡片。其中卡片的组成部分主要是包括了图片和详情。 卡片的动效是鼠标悬停在卡片上时,图片会移动到左侧,并且图片是毛玻璃效果。所以我们在布局的时候图片会采用绝对布局。而详情则是基础布局。 CSS3 知识…...
【面试经典150 | 数组】除自身以外数组的乘积
文章目录 写在前面Tag题目来源题目解读解题思路方法一:记录左右乘积空间优化 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法,两到三天更新一篇文章,欢迎催更…… 专栏内容以分析题目为主,并附带一些对于本题涉及到…...
uboot启动流程-涉及s_init汇编函数
一. uboot启动涉及函数 本文简单分析uboot启动流程中,涉及的汇编函数: lowlevel_init函数调用的函数:s_init 函数 save_boot_params_ret函数调用的函数: _main 函数 本文继上一篇文章的学习,地址如下:…...
单例模式详解及5种实现方式 (设计模式 一)
基本概念 在软件开发中,单例模式是一种常见的设计模式,用于确保一个类只有一个实例,并提供全局访问点。单例模式在需要确保只有一个对象实例存在的场景中非常有用,例如数据库连接、线程池、日志记录器等。 单例模式的核心思想是通…...
面试系列 - Java常见算法(一)
目录 一、排序算法 1、冒泡排序(Bubble Sort): 2、快速排序(Quick Sort): 二、查找算法 1、二分查找(Binary Search): 三、 图算法 1、深度优先搜索(De…...
Sentinel学习(1)——CAP理论,微服务中的雪崩问题,和Hystix的解决方案 Sentinel的相关概念 + 下载运行
前言 Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件,主要以流量为切入点,从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 本篇博客介绍CAP理论,微…...
C#学习 - 表达式、语句
表达式 定义 算法逻辑的最基本单元,表达一定的算法意图是由一个或多个操作数和零个或多个操作符组成的序列表达式功能是求值,得到的结果可能是一个值、对象、方法或名称空间因为操作符有优先级,所以表达式也有优先级 分类 一个值。表达式…...
VirtualBox 进入虚拟机后,鼠标出不来了
VirtualBox 进入虚拟机后,鼠标出不来了。 一般情况下,VirtualBox默认的鼠标切换快捷键是右边的Ctrl键。 如果按住右Ctrl键还是没有用,那应该是没有设置主机键。 设置方法: 打开VirtualBox的全局设定,找到热键ÿ…...
030-从零搭建微服务-消息队列(二)
写在最前 如果这个项目让你有所收获,记得 Star 关注哦,这对我是非常不错的鼓励与支持。 源码地址(后端):mingyue: 🎉 基于 Spring Boot、Spring Cloud & Alibaba 的分布式微服务架构基础服务中心 源…...
Docker从认识到实践再到底层原理(九)|Docker Compose 容器编排
前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…...
操作EXCEL计算3万条数据的NDVI并填入
Python操作EXCEL,计算3万条数据的NDVI并填入 问题描述 现在是有构建好了的查找表,不过构建了3万条数据,在excel中手动计算每行的NDVI值太麻烦了,也不会操作。 就试试python吧,毕竟python自动处理大型EXCEL数据很方便…...
Linux服务器安装Anaconda 配置远程jupyter lab使用虚拟环境
参考的博客: Linux服务器安装Anaconda 并配置远程jupyter lab anaconda配置远程访问jupyter,并创建虚拟环境 理解和创建:Anaconda、Jupyterlab、虚拟环境、Kernel 下边是正文了。 https://www.anaconda.com/download是官网网址,可…...
R语言实现随机生存森林(3)
常见问题解答 1、计算C指数 1-Error rate,或者 rsf.err <- get.cindex(yvar$Survival_months,yvar$OS,predictedrf.grow$predicted) 2、模型中predicted和predicted.oob区别 predicted和predicted.oob是两个不同的属性,它们分别表示模型的预测结果…...
WebPack-打包工具
从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求. 下面举个例子 : main.js 我们只命名导出一个变量 export const name"老六"index.js import { name } from "./tset/…...
CISSP学习笔记:PKI和密码学应用
第七章 PKI和密码学应用 7.1 非对称密码学 对称密码系统具有共享的秘钥系统,从而产生了安全秘钥分发的问题非对称密码学使用公钥和私钥对,无需支出复杂密码分发系统 7.1.1 公钥与私钥 7.1.2 RSA(兼具加密和数字签名) RSA算法…...
简述Java21新特性
Java21新特性 你发任你发我用Java8 不管Java更新了多少版本,我还是用Java8,因为在很多框架不知道支持不支持Java21,而且因为很多Jar包的版本冲突问题,所以我还是用Java8,但是对于新技术的了解是非常必要的。 Java 21是新推出的长…...
Composition API(常用部分)
1. Composition API(常用部分) 文档: https://composition-api.vuejs.org/zh/api.html 1) setup 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用2) ref 作用: 定义一个数据的响应式语法: cons…...
驱动插入中断门示例代码
驱动插入中断描述符示例代码 最近做实验,每次在应用层代码写测试代码的时候都要手动挂一个中断描述符,很不方便所以就想着写个驱动挂一个中断门比较省事 驱动测试效果如下: 下面的代码是个架子,用的时候找个驱动历程传递你要插…...
1 论文笔记:Efficient Trajectory Similarity Computation with ContrastiveLearning
2022CIKM 1 intro 1.1 背景 轨迹相似度计算是轨迹分析任务(相似子轨迹搜索、轨迹预测和轨迹聚类)最基础的组件之一现有的关于轨迹相似度计算的研究主要可以分为两大类: 传统方法 DTW、EDR、EDwP等二次计算复杂度O(n^2)缺乏稳健性 会受到非…...
如何做一个基于 Python 的搜索引擎?
怎么做一个基于 python 的搜索引擎? 1、确定搜索引擎范围和目标用户 在决定做一个基于Python的搜索引擎之前,首先需要确定搜索引擎的范围和目标用户。搜索引擎的范围可以包括新闻、商品、音乐等,不同的领域需要不同的数据来源和处理方式。同…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址:LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂,正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
