HTML笔记 ·

鼠标经过或点击时图片变大

在淘宝上的商品展示的都是缩略图,有的当鼠标经过时图片变大,为的是让顾客看的更清楚,同时又能节省网页空间,这是一种非常方便的方法。我来给大家介绍一种方法,当鼠标经过的时候图片放到,如果放到手机上时,当你用手点击图片的时候图片放大,下面来看一下代码。

<html>
<head>
<title></title>
<style type="text/css">
#img {
<!--设置图片从小变到大所需要的时间-->
transition: transform 0.8s; 
}
#img:hover {
<!--设置图片变大的倍数,数值越大图片越大-->
transform: scale(1.5); 
}
</style>

</head>
<body>
<div style="left:30%;top:30%;margin:0;padding:0;position:absolute;">
<img id="img" src="img/weixin.jpg" />
</div>

</body>

</html>

代码非常的简单,并且关键部位有注释,相信大家都能看懂,想看效果的可以点击下面的演示查看。

参与评论