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

多卡片效果悬停效果

效果展示

在这里插入图片描述

在这里插入图片描述

页面结构

从页面的结构上看,在默认状态下毛玻璃卡片是有层次感的效果叠加在一起,并且鼠标悬停在卡片区域后,卡片整齐排列。

CSS3 知识点

  • transform 属性的 rotate 值运用
  • content 属性的 attr 值运用

实现页面整体布局

<div class="container"><div class="glass" style="--i: -15" data-text="Design"><i class="fa-solid fa-pen"></i></div><div class="glass" style="--i: 5" data-text="Code"><i class="fa-solid fa-code"></i></div><div class="glass" style="--i: 25" data-text="Launch"><i class="fa-solid fa-rocket"></i></div><div class="glass" style="--i: -15" data-text="Earn"><i class="fa-solid fa-money-check-dollar"></i></div>
</div>

实现卡片的样式

.container .glass {position: relative;width: 200px;height: 240px;background: linear-gradient(#fff2, transparent);border: 1px solid rgba(0, 0, 0, 0.25);backdrop-filter: blur(10px);display: flex;justify-content: center;align-items: center;transition: 0.5s;border-radius: 10px;margin: 0 -45px;/* 获取HTML中的样式变量值 */transform: rotate(calc(var(--i) * 1deg));
}.container:hover .glass {transform: rotate(0deg);margin: 0 20px;
}

实现卡片悬停样式

.container .glass::before {/* 获取HTML页面中的文字变量值 */content: attr(data-text);position: absolute;bottom: 0;width: 100%;height: 40px;background: rgba(255, 255, 255, 0.05);display: flex;justify-content: center;align-items: center;color: #fff;
}.container .glass i {font-size: 5em;color: #fff;
}

完整代码下载

完整代码下载

相关文章:

多卡片效果悬停效果

效果展示 页面结构 从页面的结构上看&#xff0c;在默认状态下毛玻璃卡片是有层次感的效果叠加在一起&#xff0c;并且鼠标悬停在卡片区域后&#xff0c;卡片整齐排列。 CSS3 知识点 transform 属性的 rotate 值运用content 属性的 attr 值运用 实现页面整体布局 <div …...

首饰饰品经营商城小程序的作用是什么

首饰如耳钉、戒指、手镯等除了高价值产品外&#xff0c;还有很多低价产品&#xff0c;市场需求客户众多&#xff0c;在实际经营中&#xff0c;商家们也会面临一些痛点。 私域话题越来越多加之线上线下同行竞争、流量匮乏等&#xff0c;更对商家选择自建商城经营平台。 通过【…...

华为OD机试真题【服务器能耗统计】

1、题目描述 【服务器能耗统计】 服务器有三种运行状态:空载、单任务、多任务,每个时间片的能耗的分别为1、3、4; 每个任务由起始时间片和结束时间片定义运行时间; 如果一个时间片只有一个任务需要执行,则服务器处于单任务状志; 如果一个时间片有多个任务需要执行,则服务器处于…...

ubuntu按下del却出现空格(命令行下键盘错乱)

问题&#xff1a; 有一天远程我的ubuntu 20.04&#xff0c;发现为何按 del 会产生空格后移的效果&#xff0c;up键也会重叠显示&#xff0c;首先感觉是这个远程软件有问题&#xff0c;于是又换了xshell&#xff0c;发现还是不行&#xff0c;只能打开积灰已久的笔记本&#xff0…...

Go开始:Go基本元素介绍

目录 标识符与关键字Go中的标识符Go关键字关键字示例 具名的函数常规函数代码示例 方法代码示例 高阶函数代码示例 匿名函数与Lambda表达式代码示例 闭包代码示例 具名的值变量基本数据类型复合数据类型指针类型 常量基本常量类型枚举常量常量表达式 定义类型和类型别名类型定义…...

十二、【漏洞复现】Rails任意文件读取(CVE-2019-5418)

十二、【漏洞复现】Rails任意文件读取(CVE-2019-5418&#xff09; 12.1、漏洞原理 Ruby on Rails是一个使用 Ruby 语言写的开源 Web 应用框架&#xff0c;它是严格按照 MVC 结构开发的。它努力使自身保持简单&#xff0c;来使实际的应用开发时的代码更少&#xff0c;使用最少…...

【计算机视觉|人脸建模】学习从4D扫描中获取的面部形状和表情的模型

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;Learning a model of facial shape and expression from 4D scans 链接&#xff1a;Learning a model of facial shape and expression from 4D scans | ACM Transactions on Graphics Pe…...

【ADB】蓝牙总结

ADB 打开蓝牙关闭蓝牙打开Setting查看蓝牙地址查看蓝牙名称查看蓝牙是否开启车机蓝牙Setting配置路径wifi 打开蓝牙 adb root adb shell svc bluetooth enable 关闭蓝牙 adb root adb shell bluetooth disable 打开Setting adb shell am start -n com.android.settings/.S…...

嵌入式系统设计与应用---ARM处理器体系结构(学习笔记)

ARM处理器概述 Cortex-A8处理器工作模式 ps&#xff1a;除用户模式以外的其他模式被称为非用户模式或特权模式&#xff1b;除用户模式及系统模式以外的其他模式可称为异常模式 Cortex-A8存储器管理​​​​​​​ ARM的基本数据类型 字节&#xff08;Byte&#xff09;&#…...

计算机竞赛 身份证识别系统 - 图像识别 深度学习

文章目录 0 前言1 实现方法1.1 原理1.1.1 字符定位1.1.2 字符识别1.1.3 深度学习算法介绍1.1.4 模型选择 2 算法流程3 部分关键代码 4 效果展示5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 毕业设计 图像识别 深度学习 身份证识别…...

StarRocks数据导入

1、相关环境 Flink作为当前流行的流式计算框架&#xff0c;在对接StarRocks时&#xff0c;若直接使用JDBC的方式"流式"写入数据&#xff0c;对StarRocks是不友好的&#xff0c;StarRocks作为一款MVCC的数据库&#xff0c;其导入的核心思想还是"攒微批降频率&qu…...

JavaSE | 初识Java(一) | JDK \ JRE \ JVM

Java初识 Java 是一门半编译型、半解释型语言。先通过 javac 编译程序把源文件进行编译&#xff0c;编译后生成的 .class 文件是由字节 码组成的平台无关、面向 JVM 的文件。最后启动 java 虚拟机 来运行 .class 文件&#xff0c;此时 JVM 会将字节码转换成平台能够理…...

6轮面试阿里Android开发offer,薪资却从21k降到17k,在逗我?

一小伙工作快3年了&#xff0c;拿到了阿里云Android开发岗位P6的offer&#xff0c;算HR面一起&#xff0c;加起来有6轮面试了&#xff0c;将近3个月的时间&#xff0c;1轮同级 1轮Android用人部门leader 1轮Android 组leader 1轮项目CTO 1轮HR 1轮HRBP。 一路上各种事件分…...

基于混合蛙跳优化的BP神经网络(分类应用) - 附代码

基于混合蛙跳优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于混合蛙跳优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.混合蛙跳优化BP神经网络3.1 BP神经网络参数设置3.2 混合蛙跳算法应用 4.测试结果…...

[架构之路-230]:计算机硬件与体系结构 - 可靠性、可用性、稳定性;MTTF、MTTR、MTBF

目录 一、软件质量属性 二、可靠性、可用性、稳定性区别 2.1 比较 2.2 公式比较 2.3 "正常工作时间"和"正常运行时间" 2.4 比较案例 2.5 可用性好但可靠性较差的示例 三、MTTF、MTTR、MTBF 3.1 图示 3.2 定义 &#xff08;1&#xff09;MTTF&am…...

selenium自动化测试环境安装教程

0X00前言&#xff1a; Selenium是一个广泛应用于Web应用程序测试的工具。它提供了一组功能强大的API&#xff0c;用于模拟用户与Web浏览器的交互。以下是对Selenium的简要介绍&#xff1a; 功能&#xff1a;Selenium能够自动化执行各种Web浏览器上的操作&#xff0c;如点击、输…...

如何修改springboot项目启动时的默认图标?

如下所示为springboot项目启动时的默认图标&#xff0c;我们可以把它换成我们自己喜欢的图片 方法如下&#xff1a; 第一步&#xff1a;我们需要将图片放置当前项目的resources目录下 如下所示为我自定义的一张照片 第二步&#xff1a; 方法1:在application.properties文件中…...

基于阴阳对优化的BP神经网络(分类应用) - 附代码

基于阴阳对优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于阴阳对优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.阴阳对优化BP神经网络3.1 BP神经网络参数设置3.2 阴阳对算法应用 4.测试结果&#x…...

Spring bean定义Spring Bean 的作用域

Spring bean定义 目录 Spring bean定义 Spring配置元数据 Spring Bean 的作用域 singleton作用域&#xff1a; 原型作用域&#xff1a; 示例&#xff1a; 形成应用程序的骨干是由Spring IoC容器所管理的对象称为bean。bean被实例化&#xff0c;组装&#xff0c;并通过Sprin…...

代码随想录 动态规划 part16

583. 两个字符串的删除操作 给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 思路&#xff1a;dp[i][j]数组表示使得 word1[:i] 和 word2[:j] 相同所需的最小步数。当word1[i-1]word2[…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...