CSS实现鼠标移入时图片的放大效果及缓慢过渡效果-案例

最新推荐文章于 2025-03-11 12:09:31 发布
最新推荐文章于 2025-03-11 12:09:31 发布
阅读量6.5k 收藏 30
点赞数 3
分类专栏： HTML 文章标签： css html html5 scale 图片放大效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JackieDYH/article/details/120155128
版权
本文详细介绍了如何使用CSS的transform:scale()属性实现元素的动态缩放，并配合transition属性创建平滑的放大效果。通过实例演示了如何在鼠标悬停时让图片以1.3倍的比例放大，同时展示了动画执行的0.6秒延迟。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

transform:scale()可以实现按比例放大或者缩小功能。
transition可以设置动画执行的时间，实现缓慢或者快速的执行动画

<body>
  <div>
    <img src="https://img-blog.csdnimg.cn/2021031616343485.gif">
  </div>
</body>
div {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  margin-top: 100px;
  overflow: hidden; //图片超出div部分隐藏
}
div img {
  width: 100%;
  height: 100%;
  transition: all 0.6s; //设置动画执行的时间为0.6s
  cursor: pointer;
}
div img:hover {
  transform: scale(1.3); //设置图片按照比例放大1.3倍
}

在线演示 

CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原
易天海
07-07 2956
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ wid...
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
李海江的博客
12-14 4万+
CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果： 2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：
纯CSS3图片放大缩小效果的实现
最新发布
weixin_28746213的博客
03-11 1225
本文还有配套的精品资源，点击获取 简介：CSS3是现代网页设计的关键技术之一，其中transform属性，特别是scale()函数，可用于实现图片的放大缩小效果，增强用户交互体验。通过使用:hover伪类、transition属性和transform-origin属性，可以轻松实现图片在鼠标悬停时的动态放大和缩小。此外，将图片包裹在相对定位的容器内并设置为绝对定位，可避免放...
CSS实现鼠标滑过图片放大,外部盒子不变
dujintao1的博客
12-04 1119
* 设置overflow: hidden 当放大的时候超出部分隐藏 */
CSS移入图片浮动效果
Sunshine_Jian的博客
10-29 586
效果： 代码： <!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"> &.
html图片向上移动top,仅用css来做一个动画效果，鼠标移入画面向上移动
weixin_35501678的博客
06-03 1393
仅用css来做一个动画效果，鼠标移入画面向上移动发布时间：2018-05-28 14:48,浏览次数：444, 标签：css用户需求：正常情况时，文字介绍停留在图片底部，当鼠标移入图片时，文字及其背景向上滑动文字居中背景色充满，截图如下效果网址：http://103.233.7.23:8090/chengXinWeb/#/credible/indexcss：.right-second-col {f...
纯css鼠标移入图片放大
Candy_mi的博客
06-07 1806
html&lt;div class="big_ewrp"&gt; &lt;div class="image_box"&gt; &lt;img src="http://assets.jq22.com/plugin/2018-06-07-01-19-03.png" /&gt; &lt;/div&gt; &lt;/div&gt;css&lt;style
CSS3实现鼠标移动到一张图片上，另一张图片显示（缓慢出现，有过渡效果）,移出图片时，另一张图片缓慢消失
sinat_41747081的博客
05-14 1万+
版权声明：本文为博主原创文章，未经博主允许不得转载。 这里实现的效果，鼠标移动到橘黄色的图片上时，另一张白色的图片缓慢显示，橘黄色的图片缓慢消失；移出该白色的图片上时，橘黄色的图片缓慢显示，该白色的图片缓慢消失； 即：最开始是图片 鼠标放上去时显示: 移开鼠标又变成了： 下面是实现代码： html为： <body> <div class="content"> ...
【Web动画技术】：CSS动画与JavaScript动画在UI中的效果对比与选择
![【Web动画技术】：CSS动画与JavaScript动画在UI中的效果对比与选择]...文章还对CSS动画与JavaScript动画在效果对比和实际案例分析中的技术选型
进阶动画：CSS3动画特效的高级应用
CSS3动画是指利用CSS3技术来实现网页元素的动态效果展示，包括平移、旋转、缩放等各种动画效果。通过在样式表中定义过渡、变换或关键帧动画等属性，可以使元素在界面上产生流畅的动画效果，提升用户体验。 ## 1.2 ...
【vijeo Designer：提升交互视觉效果秘籍】：图形&动画，让你的界面活起来
本文从基础图形设计讲起，深入探讨了图形编辑技巧、组合与层次处理、动态图形与数据绑定，以及动画的原理、类型和实现技巧。文中还涉及到高级视觉技术，如特效图层、3D图形以及优化与调试方法，并通过交互视觉案例...
【动画与过渡】：交互体验增强的梦想贩卖机变现宝小程序
!... # 摘要 动画与过渡作为用户体验的关键组成部分，在现代交互设计中扮演着至关重要的角色...通过分析CSS动画、JavaScript动画技术以及小程序平台对动画的支持情况，本研究提供了过渡效果在实践中的应用案例和方法。此外
鼠标经过图片缓慢上移10px？
weixin_45651609的博客
06-21 522
鼠标经过图片缓慢上移10px？
css 动画鼠标悬浮整体向上移动；字体从下往上缓慢滑动
qq_40055200的博客
02-16 1695
1.鼠标移入后悬浮；整体向上 2.鼠标移入后介绍字体显示从下往上滑入 transform;transition 代码后期附上
CSS实现鼠标移入时图片的放大效果以及缓慢过渡
weiyuexin的博客
07-08 5213
transform:scale()可以实现按比例放大或者缩小功能。 transition可以设置动画执行的时间，实现缓慢或者快速的执行动画，效果图如下： 源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css实现鼠标移入时的放大效果</title> <style type="text/css">
html图片过渡放大,css3图片放大缩小过度动画
weixin_28938385的博客
06-05 822
(1)需要加动画的节点.lucky_h_img {animation: mymove 3s infinite;-webkit-animation: mymove 3s infinite; /*Safari and Chrome*/animation-direction: alternate; /*轮流反向播放动画。*/animation-timing-function: ease-in-out; ...
CSS3 动画，鼠标移上去，div 旋转、放大、缩小、移动(1)
2401_84097427的博客
04-03 184
次登录时间：当前时间：
CSS3滚动视差效果的制作技巧
natalie86的专栏
03-03 1300
“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果，它其实就是利用图片形成不同的层，分别以不同的速度，不同的方向移动产生的效果。这会产生出很奇妙的视觉效果，能有力的吸引住浏览者的目光。 观看演示 在web设计中，最常见的实现视差效果的方式是使用jQuery插件。但这种方法有一些弊端。这些插件大多都是在window对象的scroll事件上放
nginx 路径转发 url?参数
09-06
Nginx作为一款高性能的反向代理服务器，在转发路径和参数方面有很多灵活的配置选项。 首先，Nginx可以通过location指令将不同的路径转发到不同的目标服务器。例如，通过以下配置将路径"/api"下的请求转发到后端的目标服务器： ``` location /api { proxy_pass http://backend_server; } ``` 这样，当客户端请求"/api/user"时，Nginx会将请求转发到指定的backend_server服务器。 其次，Nginx也可以将URL中的参数进行转发。例如，当URL中包含参数"username"时，可以通过以下配置将其转发到后端的目标服务器： ``` location / { proxy_pass http://backend_server; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; if ($args ~* "username=(.*)") { set $username $1; proxy_set_header X-Username $username; } } ``` 上述配置的含义是，当URL中的参数"username"存在时，将其值赋给变量"$username"，然后通过"proxy_set_header"指令将该变量作为HTTP请求头"X-Username"的值传递给后端的目标服务器。 通过以上的配置，Nginx可以实现路径的转发和URL中参数的转发，从而灵活地将请求转发到不同的目标服务器，并传递相关的参数信息。这可以提高系统的灵活性和扩展性，同时也能更好地满足业务需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JackieDYH

谢谢您嘞！我会继续加油地

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值