CSS设置鼠标放在图片上hover的时候会按比例放大的效果

图片hover之后等比例放大，鼠标移开又等比例恢复原状，同时带有动画过渡效果
使用CSS3中的transform属性；

 <!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>hover放大效果</title>  
        <style type="text/css">  
            div{  
                width: 900px;  
                height: 600px;  
                border: 1px solid #000;  
                margin: 50px auto;  
                overflow: hidden;  
                border-radius: 5px;
            }  
            div img{  
                cursor: pointer;  
                transition: all 0.5s; /* 所有的属性变化在0.5s的时间段内完成 */
            }  
            div img:hover{  
                transform: scale(1.5); /* 鼠标放到图片上的时候图片按比例放大1.5倍   */
            }  
        </style>  
    </head>  
    <body>  
        <div>  
			<img src="D:\桌面\Code\js特效\images/1.jpg" style="width: 200px;height: 200px">
        </div>  
    </body>  
</html>

posted @ 2020-03-31 23:59 hanfe1 阅读(699) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）

公告

长路漫漫唯剑作伴。

昵称： hanfe1
园龄： 6年11个月
粉丝： 67
关注： 30

+加关注

2025年3月

日

一

二

三

四

五

六

CSS设置鼠标放在图片上hover的时候会按比例放大的效果

公告

长路漫漫唯剑作伴。

搜索

随笔分类

随笔档案

带佬

阅读排行榜

评论排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>hover放大效果</title>
	<style type="text/css">
	div{
	width: 900px;
	height: 600px;
	border: 1px solid #000;
	margin: 50px auto;
	overflow: hidden;
	border-radius: 5px;
	}
	div img{
	cursor: pointer;
	transition: all 0.5s; /* 所有的属性变化在0.5s的时间段内完成 */
	}
	div img:hover{
	transform: scale(1.5); /* 鼠标放到图片上的时候图片按比例放大1.5倍 */
	}
	</style>
	</head>
	<body>
	<div>
	<img src="D:\桌面\Code\js特效\images/1.jpg" style="width: 200px;height: 200px">
	</div>
	</body>
	</html>