前端css动画缩放transform: scale()

transform: scale(2)

scale等比例放大

            大于1是放大

            小于1是缩小

            负值是倒着放大

             scaleX        scaleY    可以单独设置只在x轴y轴放大

改变中心点放大的位置

左上            left top            

左下           left bottom

左中          left center

右上            right top

右下           right bottom

右中          right center

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;/* height: 300px; */border: 5px solid red;margin: 100px auto;overflow: hidden;}img{width: 100%;transition: all 2s;transform-origin: right top;/* 改变中心点放大的位置left top            left bottomleft centerright top            right bottomright center*/}div:hover img{transform: scale(2);/*scale等比例放大大于1是放大小于1是缩小 负值是倒着放大 scaleX        scaleY可以单独设置只在x轴y轴放大*/}</style>
</head>
<body><div><img src="/image/dog.jpg" alt=""></div>
</body>
</html>

 鼠标放上去就可以缩小放大了

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python之列表的基本使用

列表 一、什么是列表二、创建 Python 列表三、二维列表四、索引和切片五、运算符六、列表的函数&#xff08;1&#xff09;len(列表名&#xff09;&#xff08;2&#xff09;min(列表名&#xff09;&#xff08;3&#xff09;max(列表名&#xff09;&#xff08;4&#xff09;s…

探索顶级PDF水印API:PDFBlocks(2024年更新)

引言 在一个敏感信息常常面临风险的时代&#xff0c;能够轻松高效地保护文档的能力至关重要。PDF水印已成为企业和个人寻求保护其知识产权、确保文件保密性的基本工具。 PDFBlocks 文字水印 API是什么&#xff1f; PDFBlocks API 提供了一个强大的解决方案&#xff0c;用于在…

如何使用博达网站群管理平台的树状导航

1 介绍 由于网站建设需要&#xff0c;需在首页的左边竖栏部分使用树状导航。我又过了一遍《网站群管理平台用户手册》&#xff0c;没发现如何在网站的首页设置树状导航组件。昨天&#xff0c;我之所以在创建树状导航上不知所措&#xff0c;是因为平台本身有一些误导&#xff0…

如何用Java SpringBoot+Vue搭建校内跑腿业务系统?实战教程解析

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

ASM实例的SPILE 存储在ASM的磁盘组上时,集群要如何去获取SPFILE并启动ASM实例?(1)

从11g R2 开始&#xff0c;ASM spfile 会自动存储在安装集群软件时创建的第一个磁盘组中&#xff0c;一般为OCR磁盘组。由于投票盘/OCR 存储在 ASM 上&#xff0c;因此需要在节点上启动 ASM。要启动 ASM&#xff0c;需要其 SPFILE 。但 SPFILE 仅位于 ASM 磁盘组上。集群是如何…

【html+css 绚丽Loading】 - 000009 五行逆流珠

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽Loading&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495…

[000-01-018].第3节:Linux环境下ElasticSearch环境搭建

我的后端学习笔记大纲 我的ElasticSearch学习大纲 1.Linux系统搭建ES环境&#xff1a; 1.1.单机版&#xff1a; a.安装ES-7.8版本 1.下载ES: 2.上传与解压&#xff1a;将下载的tar包上传到服务器software目录下&#xff0c;然后解压缩&#xff1a;tar -zxvf elasticsearch-7…

Excel求和方法之

一 SUM&#xff08;&#xff09;&#xff0c;选择要相加的数,回车即可 二 上面的方法还不够快。用下面这个 就成功了 三 还有一种一样快的 选中之后&#xff0c;按下Alt键和键&#xff08;即Alt&#xff09;

深度学习------------------卷积神经网络(LeNet)

目录 LeNet网络手写的数字识别MNIST总结卷积神经网络&#xff08;LeNet&#xff09; 问题 LeNet网络 手写的数字识别 MNIST ①输入的是&#xff1a;3232的image ②放到一个55的卷积层里面&#xff08;为什么是5&#xff1f;因为32-x128&#xff0c;∴x5&#xff09;&#xff0c…

计算机毕业设计PySpark+Flask bilibili弹幕情感分析 B站视频数据可视化 B站爬虫 机器学习 深度学习 NLP自然语言处理 大数据毕业设计

### 开题报告&#xff1a;基于PySpark和Flask的B站弹幕情感分析系统 #### 一、研究背景 在网络视频平台的用户互动中&#xff0c;弹幕&#xff08;Danmaku&#xff09;作为一种实时评论的形式&#xff0c;已经成为观众表达观点和情感的重要方式。尤其是在B站&#xff08;哔哩…

Go Roadmap-Basics中文笔记

Go Roadmap-Basics 地址&#xff1a;https://roadmap.sh/golang 简介&#xff1a;Github star No.6 学习路线 Go 中译版 Learn the Basics Go特点&#xff1a;静态类型&#xff0c;运行速度快&#xff0c;编译语言&#xff0c;编译速度快&#xff0c;自动垃圾回收&#xff…

【GH】【EXCEL】P4: Chart

文章目录 data and chartdonut chart (radial chart)Radial Chart bar chartBar Chart line chartLine Chart Scatter ChartScatter Chart Surface ChartSurface Chart Chart DecoratorsChart Decorators Chart GraphicsChart Graphics data and chart donut chart (radial cha…

C语言04--数组超详解

1.基本概念 逻辑&#xff1a;一次性定义多个相同类型的变量&#xff0c;并存储到一片连续的内存中语法&#xff1a; 数据类型 数组名字 [ 数据的量 ] ; 示例&#xff1a; int a[5]; int Num ; 语法释义&#xff1a; a 是数组名&#xff0c;即这片连续内存的名称[5] …

基于WEB的旅游推荐系统设计与实现

TOC springboot280基于WEB的旅游推荐系统设计与实现 第1章 绪论 1.1选题动因 当前的网络技术&#xff0c;软件技术等都具备成熟的理论基础&#xff0c;市场上也出现各种技术开发的软件&#xff0c;这些软件都被用于各个领域&#xff0c;包括生活和工作的领域。随着电脑和笔…

五、2 移位操作符赋值操作符

1、移位操作符 2、赋值操作符 “ ”赋值&#xff0c;“ ”判断是否相等 1&#xff09;连续赋值 2&#xff09;复合赋值符

VS Code开发C#(.NET)之快速入门

本篇快速介绍在VS Code中开发C#的完整说明和示例&#xff1a; 环境准备 安装VS Code&#xff1a; 前往Visual Studio Code官网 下载并安装VS Code。 安装.NET SDK&#xff1a; C#是基于.NET框架的&#xff0c;因此需要安装 .NET SDK。 前往 .NET官网 下载并安装适用于操…

成为Python砖家(4): 装饰器的简单理解

第一次理解 Python 中的装饰器&#xff08;decorator&#xff09;&#xff0c;是Python中一个非常强大的工具&#xff0c;它是一个返回函数的函数。 上面这个定义很简洁&#xff0c;但是没说清楚。 第二次理解 装饰器&#xff0c;是一个接收函数 func、返回封装后的函数 wr…

【生日视频制作】路虎劳斯莱斯中控改名字AE模板修改文字软件生成器教程特效素材【AE模板】

路虎劳斯莱斯中控改名字生日视频制作教程AE模板改文字软件特效 怎么如何做的【生日视频制作】路虎劳斯莱斯中控改名字AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤&#xff1a; 安装AE软件下载AE模板把AE模板导入AE软件修改图片或文字渲染出视频

Element-UI Table实现列表筛选数据及列表嵌套选择框

VUE 框架在 Element UI 的基础上&#xff0c;Table 组件中实现了列表数据的修改功能&#xff0c;支持单选和多选功能&#xff0c;并且列表具备筛选功能。样式如图所示。 功能介绍 点击table列名实现筛选查询功能相关性判断点击列表中的正方形实现选择框功能&#xff0c;同时修…

Qt5 编译 Qt creator 源码中的 designer 模块

文章目录 下载 Qt Creator 源码 下载 Qt Creator 源码 Github: https://github.com/qt/qttools 笔记打算用 Qt 5.12.12 来编译 qt creator-designer 所以笔者下载的是 tag - 5.12.12 &#xff0c;解压后如下&#xff0c;先删除多余的文件&#xff0c;后续还要删除更多文件方便…