当前位置： 首页 > article >正文

【css酷炫效果】纯CSS实现立体纸张折叠动效

article 2026/3/8 1:00:29

【css酷炫效果】纯CSS实现悬浮阴影扩散交互

  • 缘
  • 创作背景
  • html结构
  • css样式
  • 完整代码
    • 基础版
    • 进阶版(3d 悬浮效果)
  • 效果图

通过CSS box-shadow与transition属性实现悬浮阴影扩散交互，为元素添加细腻的悬浮反馈。

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490493

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

<div class="shadow-card"><h2>悬浮查看阴影魔法</h2><p>CSS阴影交互效果</p>
</div>

css样式

.shadow-card {width: 300px;padding: 2rem;background: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 初始阴影 */transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}.shadow-card:hover {box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* 扩散阴影 */
}

完整代码

基础版

<!DOCTYPE html>
<html>
<head>
<style>
.shadow-card {width: 300px;padding: 2rem;background: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 初始阴影 */transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}.shadow-card:hover {box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* 扩散阴影 */
}
</style>
</head>
<body><div style='text-align:center;margin-top:50px;'><div class="shadow-card"><h2>悬浮查看阴影魔法</h2><p>CSS阴影交互效果</p></div></div></body>
</html>

进阶版(3d 悬浮效果)

<!DOCTYPE html>
<html>
<head>
<style>
.shadow-card {width: 300px;padding: 2rem;background: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 初始阴影 */transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}.shadow-card:hover {box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* 扩散阴影 */
}
.shadow-3d:hover {box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);transform: translateY(-8px);
}
</style>
</head>
<body><div style='text-align:center;margin-top:50px;'><div class="shadow-card shadow-3d"><h2>悬浮查看阴影魔法</h2><p>CSS阴影交互效果</p></div></div></body>
</html>

效果图

在这里插入图片描述

在这里插入图片描述

相关文章：

【css酷炫效果】纯CSS实现立体纸张折叠动效

【css酷炫效果】纯CSS实现悬浮阴影扩散交互 缘创作背景html结构css样式完整代码基础版进阶版(3d 悬浮效果) 效果图 通过CSS box-shadow与transition属性实现悬浮阴影扩散交互&#xff0c;为元素添加细腻的悬浮反馈。 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;htt…...

编程日记 2026/3/5 4:23:49

案例5_1:单位数码管显示0

文章目录 文章介绍效果图仿真图5_1放置单位数码管 代码5_1.c 文章介绍 效果图 仿真图5_1 复制案例1_2的仿真图&#xff0c;在此基础上修改 注意&#xff1a;栅格大小需要缩小 放置单位数码管 代码5_1.c #include <reg52.h>#define uchar unsigned char #define uint un…...

编程日记 2026/2/16 8:23:34

Linux centos7误删/boot拯救方法

1.进入救援模式 插入CentOS 7安装光盘&#xff0c;重启系统。在开机时按BIOS设置对应的按键&#xff08;通常是F2等&#xff09;&#xff0c;将启动顺序调整为CD - ROM优先。 系统从光盘启动后&#xff0c;选择“Troubleshooting”&#xff0c;然后选择“Rescue a CentOS s…...

编程日记 2026/3/7 18:28:52

操作系统八股文整理(一)

操作系统八股文整理 一、进程和线程的区别二、进程与线程的切换过程一、进程切换进程切换的步骤&#xff1a; 二、线程切换线程切换的步骤&#xff1a; 三、进程切换与线程切换的对比四、上下文切换的优化 三、系统调用一、系统调用的触发二、从用户空间切换到内核空间三、执行…...

编程日记 2026/3/7 22:32:59

20250317笔记本电脑在ubuntu22.04下使用acpi命令查看电池电量

20250317笔记本电脑在ubuntu22.04下使用acpi命令查看电池电量 2025/3/17 18:05 百度&#xff1a;ubuntu查看电池电量 百度为您找到以下结果 ubuntu查看电池电量 在Ubuntu操作系统中&#xff0c;查看电池电量通常可以通过命令行或者图形界面来完成。下面是一些常见的方法&…...

编程日记 2026/2/23 15:32:12

蓝桥杯备考----模拟算法 phone number

嗯。这道题可以在两个和三个数字加-&#xff0c;我们只要随便输出一个奏行 那么&#xff01;我们规范一下&#xff0c;我们尽可能的只在两个数字之间加&#xff0c;但是如果一共奇数个的话&#xff0c;我们就让最后三个成一组&#xff0c;也就是说&#xff0c;我们用的是个小贪…...

编程日记 2026/3/7 18:57:35

【数据分享】2000—2024年我国省市县三级逐月归一化植被指数（NDVI）数据（Shp/Excel格式）

之前我们分享过2000—2024年逐月归一化植被指数&#xff08;NDVI&#xff09;栅格数据&#xff08;可查看之前的文章获悉详情&#xff09;&#xff0c;该数据来源于NASA定期发布的MOD13A3数据集&#xff01;很多小伙伴拿到数据后反馈栅格数据不太方便使用&#xff0c;问我们能不…...

编程日记 2026/2/23 14:33:47

算法基础篇（蓝桥杯常考点）

算法基础篇 前言 算法内容还有搜索&#xff0c;数据结构&#xff08;进阶&#xff09;&#xff0c;动态规划和图论 数学那个的话大家也知道比较难&#xff0c;放在最后讲 这期包含的内容可以看目录 模拟那个算法的话就是题说什么写什么&#xff0c;就不再分入目录中了 注意事…...

编程日记 2026/2/17 3:04:30

Python中使用vlc库实现视频播放功能

文章目录 前言1. 环境准备1.1Python安装1.2选择Python开发环境1.3安装必要库 2. 基础播放示例3. 常用播放控制功能4. 事件监听5. 播放网络流媒体6. 结合 GUI 库制作视频播放器&#xff08;以 Tkinter 为例&#xff09; 前言 本教程主要包含打开文件、播放和停止按钮&#xff0…...

编程日记 2026/2/16 9:25:41

蓝桥杯真题——洛谷 Day10 并查集（枚举）

目录 P8651 [蓝桥杯 2017 省 B] 日期问题 P8635 [蓝桥杯 2016 省 AB] 四平方和 P8651 [蓝桥杯 2017 省 B] 日期问题 思路&#xff1a; 使用scanf读入&#xff0c;枚举从1960到2059&#xff0c;若符合题目形式&#xff0c;加入答案&#xff0c; 从小到大输出&#xff1a;存入结…...

编程日记 2026/3/7 8:00:49

微前端 无界wujie

开发环境配置: Node.js 版本 < 18.0.0 pnpm 脚手架示例模版基于 pnpm turborepo 管理项目 如果您的当前环境中需要切换 node.js 版本, 可以使用 nvm or fnm 进行安装. 以下是通过 nvm 或者nvs 安装 Node.js 16 LTS 版本 nvs安装教程 https://blog.csdn.net/glorydx/artic…...

编程日记 2026/2/17 0:18:57

Linux应用：程序运行

kill kill命令的这种用法是向指定的进程发送特定信号编号的信号。信号在操作系统中是一种软件中断机制&#xff0c;用于通知进程发生了某种特定事件或要求进程执行特定操作。​ kill - 信号编号 进程 ID 信号编号的含义&#xff1a;不同的信号编号代表不同的事件或操作。例如…...

编程日记 2026/3/6 18:50:12

【公务员考试】高效备考指南

高效备考指南&#xff1a;从计划制定到心态调整的全面攻略 公务员考试竞争激烈&#xff0c;备考过程既需要科学规划&#xff0c;也需要持之以恒的努力。结合多位高分考生的经验与专业机构的指导&#xff0c;本文整理了一套系统化的备考策略&#xff0c;涵盖目标设定、学习方法…...

编程日记 2026/2/27 6:15:41

基于SpringBoot+Vue3实现的宠物领养管理平台功能一

一、前言介绍&#xff1a; 1.1 项目摘要 随着社会经济的发展和人们生活水平的提高&#xff0c;越来越多的人开始关注并参与到宠物领养中。宠物已经成为许多家庭的重要成员&#xff0c;人们对于宠物的关爱和照顾也日益增加。然而&#xff0c;传统的宠物领养流程存在诸多不便&a…...

编程日记 2026/3/8 0:10:14

ens33没有分配到IPV4问题

方法一&#xff1a;手动为 ens33 接口分配 IP 地址 你能够借助 ip 命令手动给 ens33 接口分配 IP 地址。不过这种方式在系统重启之后就会失效。 步骤 查看网络信息 先查看一下当前网络的子网信息&#xff0c;例如网关地址和子网掩码等&#xff0c;你可以通过路由器管理界面或…...

编程日记 2026/2/26 6:55:44

SpringCloud 学习笔记2（Nacos）

Nacos Nacos 下载 Nacos Server 下载 | Nacos 官网 下载、解压、打开文件&#xff1a; 更改 Nacos 的启动方式 Nacos 的启动模式默认是集群模式。在学习时需要把他改为单机模式。 把 cluster 改为 standalone&#xff0c;记得保存&#xff01; 启动startup.cmd Ubuntu 启动…...

编程日记 2026/3/6 15:58:31

Blender-MCP服务源码4-初始化项目解读

Blender-MCP服务源码4-初始化项目解读 上篇文章针对Blender开发框架完成了一个基础模板的搭建&#xff0c;并在Blender中成功进行了运行&#xff0c;那这个初始化项目中是如何进行页面效果呈现的&#xff0c;尝试手动进行功能精简来拆解项目代码 1-核心知识点 1&#xff09;如…...

编程日记 2026/2/14 21:29:06

基于eNSP的IPV4和IPV6企业网络规划

基于eNSP的IPV4和IPV6企业网络规划 前言网络拓扑设计功能设计技术详解一、网络设备基础配置二、虚拟局域网&#xff08;VLAN&#xff09;与广播域划分三、冗余协议与链路故障检测四、IP地址自动分配与DHCP相关配置五、动态路由与安全认证六、广域网互联及VPN实现七、网络地址转…...

编程日记 2026/2/15 1:39:35

Vue3项目中可以尝试封装那些组件

在 Vue 3 项目中&#xff0c;组件的封装可以根据功能、复用性和业务需求进行划分。以下是一些常见的组件类型&#xff0c;适合封装为独立组件&#xff1a; 1. 基础 UI 组件 按钮 (Button) 封装不同样式、大小、状态的按钮。支持 disabled、loading 等状态。 输入框 (Input) 封…...

编程日记 2026/2/15 4:27:35

Web Component 教程（二）：如何有效管理和使用自定义属性

前言 在现代前端开发中&#xff0c;Web Component 是一个强大的工具&#xff0c;可以帮助我们创建可重用的组件。Web Component 的一个重要特性是能够处理自定义属性&#xff0c;这使得我们能够灵活地控制组件的行为和外观。今天&#xff0c;我会通过一个通俗易懂的教程&#…...

编程日记 2026/2/15 2:55:21

C#特性和反射

1。特性概念理解&#xff1f; 特性&#xff08;Attribute&#xff09;是用于在【运行时】传递程序中各种元素&#xff08;比如类、属性、方法、结构、枚举、组件等&#xff09;行为信息的声明性标签。您可以通过使用特性向程序添加声明性信息。一个声明性标签是通过放置在它所…...

编程日记 2026/3/3 6:36:47

蓝桥杯刷题周计划（第三周）

目录 前言题目一题目代码题解分析 题目二题目代码题解分析 题目三题目代码题解分析 题目四题目代码题解分析 题目五题目代码题解分析 题目六题目代码题解分析 题目七题目代码题解分析 题目八题目代码题解分析 题目九题目代码题解分析 题目十题目代码题解分析 前言 大家好&#…...

编程日记 2026/3/3 15:39:14

mysql5.x和mysql8.x查看和设置隔离级别

MySQL的隔离级别 级别标志值描述读未提交READ-UNCOMMITTED0存在脏读、不可重复读、幻读的问题读已提交READ-COMMITTED1解决脏读的问题&#xff0c;存在不可重复读、幻读的问题可重复读REPEATABLE-READ2mysql 默认级别&#xff0c;解决脏读、不可重复读的问题&#xff0c;存在幻…...

编程日记 2026/3/7 18:12:36

3.17学习总结

写了两道题 刚开始用的之前做组合输出的方法&#xff0c;时间超限了&#xff0c;想不出怎么优化&#xff0c;后面看了题解&#xff0c;代码如下 #include <stdio.h> #include <stdlib.h> int n,min2e9; int a[11],b[11]; //搜索 void hly(int s,int x,int y) {//当…...

编程日记 2026/3/6 15:35:30

Blender材质 - 层权重

层权重 混合着色器 可以让 面朝向的一面显示一种材质 另一面显示另一种材质 就能实现挺不错的材质效果 移动视角 材质会跟着变化 有点类似虚幻的视差节点BumpOffset...

编程日记 2026/3/7 15:53:50

【JavaEE】Spring Boot 日志

目录 一、日志概述二、使用日志2.1 打印日志2.2 日志框架2.2.1 门面 / 外观 模式 2.3 日志级别2.3.1 六大分类2.3.2 使用 2.4 日志级别配置2.5 日志的持久化2.6 日志文件分割2.7 日志文件格式2.8 Slf4j 简单打印日志 一、日志概述 ⽇志主要是为了发现问题, 分析问题, 定位问题…...

编程日记 2026/2/21 10:57:16

Qt中的 #include “xxxx.moc“ 说明

Qt中的 #include “xxxx.moc” 说明 在Qt开发中&#xff0c;有时会看到在cpp文件末尾包含 #include "xxxx.moc" 这样的代码。这种做法主要用于以下情况&#xff1a; 使用场景 当你在非头文件中定义了一个包含Q_OBJECT宏的类时&#xff0c;需要包含对应的.moc文件。…...

编程日记 2026/2/25 16:34:25

如何用solidworks画齿轮

齿轮还是很有技术含量的,专业名词太多看不懂, 只会画 (这个东西不能自己想当然画, 齿轮之间不啮合是很有问题的,会积累磨损) 步骤1 打开设计库里的toolbox 选择正齿轮,右键生成零件 需要改的有几个关键的地方,我是只知道内圆外圆所以,对我来说最重要的是标称轴直径 (即正中间…...

编程日记 2026/2/19 23:41:07

详解布隆过滤器及其模拟实现

目录 布隆过滤器 引入 概念 工作原理 模拟实现布隆过滤器 哈希函数集 布隆过滤器基本框架 add函数&#xff08;添加到布隆过滤器中&#xff09; contains函数&#xff08;判断是否存在该值&#xff09; 完整代码 布隆过滤器的删除 布隆过滤器的误判率 布隆过滤器的…...

编程日记 2026/3/5 11:36:16

element-plus中DatePicker 日期选择器组件的使用

1.选择某一天 代码&#xff1a; <el-date-pickerv-model"invoice_date"type"date"placeholder"请选择日期"style"width: 200px;"clearable /> 运行效果&#xff1a; 问题所在&#xff1a;这个数据的格式不是我们后端需要的那种&…...

编程日记 2026/3/5 1:41:25