文章目录
- css - 实现镜头拉近效果
- 1、代码实现
- 2、效果
- 3、说明
css - 实现镜头拉近效果
1、代码实现
<html lang="zh-cn">
<head>
<title>title>
<style>
div {
margin-top: 300px;
margin-left: 300px;
overflow: hidden;
width: 490px;
}
img {
transition: transform 1.5s;
}
img:hover {
-webkit-transform: scale(1.3, 1.3);
-moz-transform: scale(1.3, 1.3);
-ms-transform: scale(1.3, 1.3);
-o-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
}
style>
head>
<body>
<div>
<img src="https://img-blog.csdnimg.cn/20190608145523400.png">
div>
body>
html>
2、效果
3、说明
transform 属性：进行2D 3D 转换
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
transition 属性：实现过渡效果
transition 属性是一个简写属性，用于设置四个过渡属性：
结合起来就是在过渡的模式下进行2D缩放，缩放倍率由scale 来决定
