<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
.avatar {
display: block;
width: 300px;
margin: 0 auto;
overflow: hidden;
}
.avatar img {
display: block;
border: 0;
width: 100%;
transform: scale(1);
transition: all 1s ease 0s;
-webkit-transform: scale(1);
-webkit-transform: all 1s ease 0s;
}
.avatar:hover img {
transform: scale(1.3);
transition: all 1s ease 0s;
-webkit-transform: scale(1.3);
-webkit-transform: all 1s ease 0s;
}
</style>
</head>
<body>
<a href="" class="avatar"><img src="img/aaa.jpg" /></a>
</body>
</html>
css实现鼠标悬停图片放大显示
最新推荐文章于 2024-05-23 10:56:36 发布