CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原

最新推荐文章于 2024-06-24 10:54:10 发布
最新推荐文章于 2024-06-24 10:54:10 发布
阅读量2.7k 收藏 5
点赞数 2
分类专栏： 前端
本文介绍如何使用CSS3实现当鼠标经过图片时，图片逐渐放大，鼠标离开后图片又缓缓恢复到原始大小的效果。通过transition属性设置动画过渡，轻松创建平滑的用户体验。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 250px;
                margin: 50px auto;
                overflow: hidden;
            }
            div img{
                width: 100%;
                cursor: pointer;
                transition: all 0.6s;/*图片放大过程的时间*/
            }
            div img:hover{
                transform: scale(1.2);/*鼠标经过图片放大的倍数*/
            }
        </style>
    </head>
    <body>
        <div>
            <img src="static/Images/bg-img-02.jpg" />
        </div>
    </body>
</html>

 

易天海
关注
专栏目录
订阅专栏
html+css+js基础问答
qq_43751465的博客
08-26 5241
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
CSS样式实现hover鼠标移入动画特效、鼠标移出特效还原效果
热门推荐
不负好时光
10-19 2万+
前端菜鸟记录一下，备忘 效果如下图： 代码： <div class="policy-center-list-li"> <img th:src="@{/img/front/policyCenter/aaaa.jpg}" > <div class="text-box"> <div class="policy-list-desc"> 长三角双创示范基地联盟签订双创券通用通兑合作协议 </
CSS3-鼠标经过图片旋转、缩放、还原
erdouzhang
03-13 9204
在线演示 html:<body> <div class="box"> <a href="#"><img src="img/02.jpg" alt=""></a> </div> </body>css：<style> .box img{ width: 250px; height: 450px; } @-webkit-keyframes p
CSS鼠标经过图片放大 鼠标离开还原
weixin_42220130的博客
12-10 1451
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <title>fe</title> <style type="text/css"> div img { width: 1860px; ...
css实现:hover过渡动画放大，离开时过渡动画还原
九段刀客的博客
12-03 3259
.box{ width:100px; height:100px; background:pink; transition: all 500ms linear; } .box:hover{ transform: scale(1.2); transition: all 500ms linear; }
JS特效第53弹：纯CSS实现鼠标经过图片特效炫酷切换动画
weixin_38343072的博客
12-29 488
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
css鼠标悬停图片放大
07-29
当鼠标悬停在图片上时，可以使用CSS的transform属性来实现图片放大效果。通过设置transform: scale()，可以按比例放大或缩小图片。同时，可以使用transition属性来设置动画执行的时间，实现缓慢或快速的执行动画。...
天气爬虫网站（flask+sqlite3+selenium+echarts）
CodeYello的博客
06-23 4158
项目介绍： 项目名称：动态爬虫天气网站 一、项目核心： 通过动态爬虫，根据用户关键词即时检索并爬取天气网站的相关天气数据， 进行相应的数据处理，最后绘制相应统计图进行数据展示。 二、任务要求 1）主要城市的天气情况(七天),(天气状况(比如晴天、多云)、风级、相对湿度、空气质量)。 2）统计分析全国各大省会当天天气情况，并作出相应的统计数据，在网页上渲染统计图。 3）天气记忆。第三点分析的数据需要记录，实现能够查看以前的天气状况。 技术介绍： 1、使用flask连接python代码和前端 2、因为天气网站的
前端犄角旮旯，非常规面试题总结（不断更新....）
最新发布
qq_51398495的博客
06-24 938
27、判断类型的方式有哪些？1、typeof操作符：用来检测数据的类型，返回的是一个表示类型的字符串。2、instanceof操作符：用来检测对象是否为指定的构造函数的实例。3、方法：可以返回对象的准确类型。4、方法：用来判断一个变量是否为数组。（一）typeof和instanceof区别typeof返回的是一个字符串，表示变量的数据类型，可能的返回值有numberstringbooleanfunctionundefinedobject。instanceof返回的是一个布尔值，true或。
css 鼠标经过图片缓慢切换图片、鼠标离开缓慢还原
weixin_30764771的博客
07-20 803
https://blog.csdn.net/qq_26780317/article/details/80486766 一.控制背景图片在一个圆形div内切换 .header .logo { width: 54px; height: 54px; margin:23px 0; text-align: center; border-radius...
鼠标经过离开事件
qq_43267265的博客
12-18 1523
$(’#xxx tr’).mouseover(function(){ //鼠标经过显示红色 $(this).css(‘color’,‘red’); }) $(’#xxx tr’).mouseout(function(){//离开没颜色 $(this).css(‘color’,’’); })
鼠标离开事件集
qq_35644434的博客
09-27 1万+
1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件 (value=='') {value='郭强'}">点击时文字消失，失去焦点时文字再出现     2.网页按钮的特殊颜色  
CSS代码鼠标经过图片变换图片
php菜鸟技术天地
11-17 1万+
<img src="#" name="picture" width="330" height="210" border="0" align="middle" onMouseOver="this.src='#'" onMouseOut="this.src='#'">
鼠标经过 离开事件 mousemove mouseleave
qq_70020706的博客
11-22 1463
鼠标经过 离开事件 mousemove mouseleave
鼠标停留触发事件，离开时也触发
weixin_51357044的博客
08-22 642
很多框架都没有自己想要的菜单效果，最近就自己写一个，我也想要有鼠标停留到一级菜单时候无需要点击就会显示二级菜单，离开时自动关闭。
鼠标移出和鼠标移入事件
qingdouxiaohua的博客
01-09 642
当鼠标放上去之后更改样式，当鼠标移出去后更改样式。记得请求jquery文件。
css过渡动画，鼠标移上去就变大（缓慢变大、过渡效果、放大的过程是过渡动画的，这个过渡动画是有时间控制的）...
weixin_30697239的博客
07-21 424
1）.CSS3的transform:scale()可以实现按比例放大或者缩小功能。 2）.CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 3）.transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。 4）transform: s...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值