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

HTML5 缩放动画（Zoom In/Out）详解

news 2025/7/8 21:48:05

HTML5 缩放动画（Zoom In/Out）详解

缩放动画是一种常见的视觉效果，用于使网页元素逐渐放大或缩小，从而吸引用户的注意力。下面将介绍如何使用 CSS 和 JavaScript 实现这种动画效果。

1. 使用 CSS 实现缩放动画

可以通过 CSS 的 @keyframes 和 transform 属性来实现缩放效果。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>缩放动画示例</title><style>.zoom {display: inline-block;transition: transform 0.5s ease;}.zoom:hover {transform: scale(1.2); /* 放大 */}.zoom-out {display: inline-block;transition: transform 0.5s ease;}.zoom-out:hover {transform: scale(0.8); /* 缩小 */}</style>
</head>
<body><h1 class="zoom">鼠标悬停放大</h1><p class="zoom-out">鼠标悬停缩小</p></body>
</html>
2. 使用 JavaScript 实现缩放动画

如果需要更复杂的控制，可以使用 JavaScript 来实现缩放动画。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>缩放动画示例</title><style>.zoom {display: inline-block;transition: transform 0.5s ease;}</style>
</head>
<body><div class="zoom" id="zoomElement">点击我放大/缩小</div><script>const zoomElement = document.getElementById('zoomElement');let isZoomed = false;zoomElement.addEventListener('click', () => {if (isZoomed) {zoomElement.style.transform = 'scale(1)'; // 恢复原大小} else {zoomElement.style.transform = 'scale(1.5)'; // 放大}isZoomed = !isZoomed;});</script></body>
</html>

总结

  • CSS 方法：简单易用，适合基础的放大和缩小效果。
  • JavaScript 方法：提供更大的灵活性，可以根据用户交互动态控制缩放效果。

通过上述方法，您可以轻松实现元素的缩放动画效果，增强网页的互动性和视觉吸引力。

相关文章：

HTML5 缩放动画（Zoom In/Out）详解

HTML5 缩放动画&#xff08;Zoom In/Out&#xff09;详解 缩放动画是一种常见的视觉效果&#xff0c;用于使网页元素逐渐放大或缩小&#xff0c;从而吸引用户的注意力。下面将介绍如何使用 CSS 和 JavaScript 实现这种动画效果。 1. 使用 CSS 实现缩放动画 可以通过 CSS 的 …...

编程日记 2025/1/11 1:22:51

C语言——文件IO 【文件IO和标准IO区别，操作文件IO】open，write，read，dup2，access，stat

1.思维导图 2.练习 1&#xff1a;使用C语言编写一个简易的界面&#xff0c;界面如下 1&#xff1a;标准输出流 2&#xff1a;标准错误流 3&#xff1a;文件流 要求&#xff1a;按1的时候&#xff0c;通过printf输出数据&#xff0c;按2的时候&#xff0c;通过p…...

编程日记 2025/1/11 1:21:50

【C++习题】22.随机链表的复制

文章目录 题目&#xff1a;138. 随机链表的复制 - 力扣&#xff08;LeetCode&#xff09;代码&#xff1a; 题目&#xff1a;138. 随机链表的复制 - 力扣&#xff08;LeetCode&#xff09; 链接&#x1f517;&#xff1a;138. 随机链表的复制 - 力扣&#xff08;LeetCode&…...

编程日记 2025/1/11 1:19:48

备考蓝桥杯：数据结构概念浅谈

目录 1数据结构的概念 什么是数据结构: 为什么要有数据结构 2.数据结构的三个组成要素 1.逻辑结构 2.存储结构 3.数据运算 3。算法好坏的度量&#xff08;时间复杂度和空间复杂度&#xff09; 时间复杂度计算 最优和平均和最差时间复杂度 计算时间复杂度例子 空间复…...

编程日记 2025/1/11 1:13:41

【TI毫米波雷达】DCA1000不使用mmWave Studio的数据采集方法，以及自动化实时数据采集

【TI毫米波雷达】DCA1000不使用mmWave Studio的数据采集方法&#xff0c;以及自动化实时数据采集 mmWave Studio提供的功能完全够用了 不用去纠结用DCA1000低延迟、无GUI传数据 速度最快又保证算力无非就是就是Linux板自己写驱动做串口和UDP 做雷达产品应用也不会采用DCA1000的…...

编程日记 2025/1/11 1:11:39

创建型模式3.建造者模式

创建型模式 工厂方法模式&#xff08;Factory Method Pattern&#xff09;抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;建造者模式&#xff08;Builder Pattern&#xff09;原型模式&#xff08;Prototype Pattern&#xff09;单例模式&#xff08;Singleto…...

编程日记 2025/1/11 1:07:36

【集成学习】Boosting算法详解

文章目录 1. 集成学习概述2. Boosting算法详解3. Gradient Boosting算法详解3.1 基本思想3.2 公式推导 4. Python实现 1. 集成学习概述 集成学习&#xff08;Ensemble Learning&#xff09;是一种通过结合多个模型的预测结果来提高整体预测性能的技术。相比于单个模型&#xf…...

编程日记 2025/1/11 1:06:33

【Orca】Orca - Graphlet 和 Orbit 计数算法

Orca&#xff08;ORbit Counting Algorithm&#xff09;是一种用于对网络中的小图进行计数的有效算法。它计算网络中每个节点的节点和边缘轨道&#xff08;4 节点和 5 节点小图&#xff09;。 orca是一个用于图形网络分析的工具&#xff0c;主要用于计算图中的 graphlets&#…...

编程日记 2025/1/11 1:00:26

58. Three.js案例-创建一个带有红蓝配置的半球光源的场景

58. Three.js案例-创建一个带有红蓝配置的半球光源的场景 实现效果 本案例展示了如何使用Three.js创建一个带有红蓝配置的半球光源的场景&#xff0c;并在其中添加一个旋转的球体。通过设置不同的光照参数&#xff0c;可以观察到球体表面材质的变化。 知识点 WebGLRenderer …...

编程日记 2025/1/11 0:55:21

【Git原理和使用】Git 分支管理（创建、切换、合并、删除、bug分支）

一、理解分支 我们可以把分支理解为一个分身&#xff0c;这个分身是与我们的主身是相互独立的&#xff0c;比如我们的主身在这个月学C&#xff0c;而分身在这个月学java&#xff0c;在一个月以后我们让分身与主身融合&#xff0c;这样主身在一个月内既学会了C&#xff0c;也学…...

编程日记 2025/1/11 0:47:08

义乌购的反爬虫机制怎么应对？

在面对义乌购的反爬虫机制时&#xff0c;可以采取以下几种策略来应对&#xff1a; 1. 使用代理IP 义乌购可能会对频繁访问的IP地址进行限制&#xff0c;因此使用代理IP可以有效地隐藏爬虫的真实IP地址&#xff0c;避免被封禁。可以构建一个代理IP池&#xff0c;每次请求时随机…...

编程日记 2025/1/11 0:46:07

消息中间件面试

RabbitMQ 如何保证消息不丢失 消息重复消费 死信交换机 消息堆积怎么解决 高可用机制 Kafka 如何保证消息不丢失 如何保证消息的顺序性 高可用机制 数据清理机制 实现高性能的设计...

编程日记 2025/1/11 0:43:04

基于CLIP和DINOv2实现图像相似性方面的比较

概述 在人工智能领域&#xff0c;CLIP和DINOv2是计算机视觉领域的两大巨头。CLIP彻底改变了图像理解&#xff0c;而DINOv2为自监督学习带来了新的方法。 在本文中&#xff0c;我们将踏上一段旅程&#xff0c;揭示定义CLIP和DINOv2的优势和微妙之处。我们的目标是发现这些模型…...

编程日记 2025/1/11 0:41:02

利用Python爬虫获取API接口：探索数据的力量

引言 在当今数字化时代&#xff0c;数据已成为企业、研究机构和个人获取信息、洞察趋势和做出决策的重要资源。Python爬虫作为一种高效的数据采集工具&#xff0c;能够帮助我们自动化地从互联网上获取大量的数据。而API接口作为数据获取的重要途径之一&#xff0c;为我们提供了…...

编程日记 2025/1/11 0:39:00

【LeetCode】力扣刷题热题100道（1-5题）附源码 链表 子串 中位数 回文子串（C++）

目录 1.两数之和 2.两数相加-链表 3.无重复字符的最长子串 4.寻找两个正序数组的中位数 5.最长回文子串 1.两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。…...

编程日记 2025/1/11 0:35:57

Docker启动失败 - 解决方案

Docker启动失败 - 解决方案 问题原因解决方案service问题 问题 重启docker失败&#xff1a; toolchainendurance:~$ sudo systemctl restart docker Job for docker.service failed because:the control process exited with error codesee:"systemctl status docker.se…...

编程日记 2025/1/11 0:31:53

【Duilib】 List控件支持多选和获取选择的多条数据

问题 使用Duilib库写的一个UI页面用到了List控件&#xff0c;功能变动想支持选择多行数据。 分析 1、List控件本身支持使用SetMultiSelect接口设置是否多选&#xff1a; void SetMultiSelect(bool bMultiSel);2、List控件本身支持使用GetNextSelItem接口获取选中的下一个索引…...

编程日记 2025/1/11 0:30:50

android系统的一键编译与非一键编译 拆包 刷机方法

1.从远程仓库下载源码 别人已经帮我下载好了在Ubuntu上。并给我权限&#xff1a;chmod -R ow /data/F200/F200-master/ 2.按照readme.txt步骤操作 安装编译环境&#xff1a; sudo apt-get update sudo apt-get install git-core gnupg flex bison gperf build-essential z…...

编程日记 2025/1/11 0:24:43

SQL语言的函数实现

SQL语言的函数实现 引言 随着大数据时代的到来&#xff0c;数据的存储和管理变得越来越复杂。SQL&#xff08;结构化查询语言&#xff09;作为关系数据库的标准语言&#xff0c;其重要性不言而喻。在SQL语言中&#xff0c;函数是一个重要的组成部分&#xff0c;可以有效地帮助…...

编程日记 2025/1/11 0:22:42

OSPF - 2、3类LSA（Network-LSA、NetWork-Sunmmary-LSA）

前篇博客有对常用LSA的总结 2类LSA&#xff08;Network-LSA&#xff09; DR产生泛洪范围为本区域 作用:  描述MA网络拓扑信息和网络信息&#xff0c;拓扑信息主要描述当前MA网络中伪节点连接着哪几台路由。网络信息描述当前网络的 掩码和DR接口IP地址。 影响邻居建立中说到…...

编程日记 2025/1/11 0:18:36

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/7/8 4:42:00

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/7/7 16:21:08

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/7/7 1:17:02

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/7/7 7:03:24

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/7/7 17:43:40

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2025/7/6 1:46:43

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/7/8 18:18:58

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

编程新知 2025/7/8 7:22:29

鸿蒙（HarmonyOS5）实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

编程新知 2025/7/7 5:23:54

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

编程新知 2025/7/8 2:31:11