css - 实现镜头拉近效果

1、代码实现

<!DOCTYPE html>
<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 来决定

css - 实现镜头拉近效果相关推荐

unity3d实现镜头缓慢拉近效果
unity3d实现镜头缓慢拉近效果 1.先将camera移动到初始视角 2.为camera添加一个脚本并进行编辑这里出现了一个小插曲,我查了一下是一个常见问题.记录下来提示一下:打开脚本后trans ...
php鼠标悬停显示图片,HTML CSS 实现鼠标悬停时图片拉近效果
前言为了让网页的使用体验更好,我们会让网页的某些元素对鼠标的动作做出响应.例如鼠标滑过.单击按钮的时候按钮变色.变形.之前在很多网页上看到了鼠标滑过一个图片链接时图片放大.拉近的效果,今天尝试实现一 ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
unity鼠标控制镜头旋转_unity3D鼠标滚轮来实现镜头拉近拉远及视角旋转
镜头拉近拉远的代码(无限拉远拉近) 代码如下: if( Input.GetAxis("Mouse ScrollWheel") != 0 ) { this.gameObject.tr ...
css实现tab切换效果
<div class="match-instruction"><div id="tab2" class="mi-cont" ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
[css] 用css实现倒影的效果
[css] 用css实现倒影的效果 box-reflect 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[css] 使用css实现彩虹的效果
[css] 使用css实现彩虹的效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...

css - 实现镜头拉近效果

文章目录

css - 实现镜头拉近效果

1、代码实现

2、效果

3、说明

css - 实现镜头拉近效果相关推荐

最新文章

热门文章