前言
为了让网页的使用体验更好，我们会让网页的某些元素对鼠标的动作做出响应。例如鼠标滑过、单击按钮的时候按钮变色、变形。之前在很多网页上看到了鼠标滑过一个图片链接时图片放大、拉近的效果，今天尝试实现一下。
1. 使用background实现
思路：设置以图片作为
div元素的背景，鼠标滑过div的时候通过background属性放大图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background实现图片拉近效果</title>
<style>
#box {
background: url(../images/img022.png);
width: 720px;
height: 720px;
margin: 0 auto;
border: 1px solid #aaa;
background-color: #444;
}
#box:hover {
background-size: 100.5% 100.5%;
}
</style>
</head>
<body>
<div id=‘box‘>
</div>
</body>
</html>2. 使用img元素的width height属性实现
思路：当鼠标滑过图片时，修改
img元素的width和height属性放大图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img图片拉近效果</title>
<style>
#box{
width:60%;
min-width:1000px;
min-height:800px;
margin:0 auto;
border:1px solid #aaa;
background-color:#444;
text-align:center;
}
img:hover{
width:723px;
height:723px;
}
</style>
</head>
<body>
<div id=‘box‘>
<img src="../images/img022.png" width=‘720px‘ height=‘720px‘ />
</div>
</body>
</html>3. 使用transform放大图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform实现图片拉近效果</title>
<style>
a:hover img {
transform: scale(1.005, 1.005);
}
</style>
</head>
<body>
<a href="#">
<img src="../images/img022.png" />
</a>
</body>
</html>4. 使用transform和transition来放大图片
以上的3种实现方式中，图片放大过程几乎都是瞬间完成的，感觉不流畅，视觉体验也不好。同
transition可以设置放大过程经历的时间，从而有流畅的感觉。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform、transform实现图片拉近</title>
<style>
.test_a {
display: block;
margin: 0 auto;
width:400px;
overflow: hidden;
}
.test_a img {
width: 100%;
}
.test_a:hover img {
transform: scale(1.2);
transition: all 1s ease 0s;
}
</style>
</head>
<body>
<a href="" class="test_a">
<img src="../images/img022.png" />
</a>
</body>
</html> 上面这种方式，图片放大过程是流畅的，但是缩小过程很生硬，可以改进一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform、transform 图片拉近 优化</title>
<style>
.test_a {
display: block;
margin: 0 auto;
width:400px;
overflow: hidden;
}
.test_a img {
width: 100%;
transform: scale(1);
transition: all 1s ease 0s;
}
.test_a:hover img {
transform: scale(1.2);
transition: all 1s ease 0s;
}
</style>
</head>
<body>
<a href="" class="test_a">
<img src="../images/img022.png" />
</a>
</body>
</html> 后语
实验的时候发现很多知识有点模糊了，该补习了。
在线DEMO https://hgy9473.github.io/myl...
原文地址：https://www.cnblogs.com/jlfw/p/12219877.html
时间： 2024-11-05 12:20:34