- <!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实现鼠标悬停图片放大显示
猜你喜欢
转载自blog.csdn.net/u012530451/article/details/77236707
今日推荐
周排行