php 鼠标点击图片放大,css3如何实现鼠标放上图片放大？（附代码）

2024-04-25 03:21:27

在css3的学习中，我们会经常做一些小的动画效果，这感觉非常有趣，所以今天的这篇文章将给大家来介绍关于css3实现图片放大的一个效果，有兴趣的小伙伴可以看一下。

我们都知道css3中增加了一个transform属性应用于元素的2D或3D转换，transform属性允许我们对元素进行旋转、缩放、移动或倾斜。所以对于css3实现图片放大是需要用到transform属性的，下面我们就来看看css3使用transform属性实现图片放大的效果。

第一种：css3实现当我们把鼠标放到图片上图片放大并且超出部分不隐藏的效果：

.enlarge{

width: 300px;

height: 300px;

border: 1px #ffffff solid;

}

.enlarge img{

width: 100%;

height: 100%;

cursor: pointer;

transition: all 0.6s;

-ms-transition: all 0.8s;

}

.enlarge img:hover{

transform: scale(1.2);

-ms-transform: scale(1.2);

}

css3实现鼠标放上图片放大的效果前后对比如下：

第二种：css3实现当我们把鼠标放到图片上图片放大并且超出部分隐藏的效果：

.enlarge{

width: 300px;

height: 300px;

overflow: hidden;

border: 1px #ffffff solid;

}

.enlarge img{

width: 100%;

height: 100%;

cursor: pointer;

transition: all 0.6s;

-ms-transition: all 0.8s;

}

.enlarge img:hover{

transform: scale(1.3);

-ms-transform: scale(1.3);

}

css3实现鼠标放上图片放大的效果前后对比如下：

说明：对于上述的两种css3实现图片放大的情况，都用到了:hover伪类，表示了鼠标悬停时候的状态，这样当我们把鼠标放到图片上的时候就会让图片放大，当鼠标移除，图片就会恢复原有的大小。

以上就是本篇文章的全部内容了，关于css3中的transform属性更详细的用法，大家可以参考css3学习手册进一步的了解。

php 鼠标点击图片放大,css3如何实现鼠标放上图片放大？（附代码）相关推荐

html的悬停图片缓慢放大,css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）...
本篇文章主要给大家介绍当鼠标滑过图片时实现放大效果的具体方法. 当我们在浏览各大电商网站时,最常见的图片动态效果,应该就是鼠标移入图片即悬停在图片时出现放大的效果了.实现这样的动态效果主要是为了突出产 ...
layui鼠标放上图片局部放大_老照片修复教程之—裁剪图片大小
对于会PS的网友来说,这些内容太小白了,但对于不会的网友来说,完全摸不着头脑,所以,41图片老照片修复以最简单的工具使用说起,争取让PS小白也能快速入门. 本节的内容就讲裁剪图片大小: 扫描或者翻拍好 ...
鼠标点击某处时可以让小精灵移动到鼠标点击的地方, 让精灵跟随鼠标移动
鼠标点击页面某处的时候可以让小精灵移动到该处 css代码: <style>html,body {height: 100%;width: 100%;background-color: bla ...
python pygame鼠标点击_Python中pygame的mouse鼠标事件用法实例
本文实例讲述了Python中pygame的mouse鼠标事件用法.分享给大家供大家参考,具体如下: pygame.mouse提供了一些方法获取鼠标设备当前的状态 ''' pygame.mouse.ge ...
python 捕获鼠标点击事件_Python捕捉和模拟鼠标事件的方法
本文实例讲述了Python捕捉和模拟鼠标事件的方法.分享给大家供大家参考.具体分析如下: 这个假期玩了不少galgame,不过有些很老的游戏没有自动运行模式,点击鼠标又太伤按键了,于是想把滚动鼠标滚轮 ...
4种方式实现鼠标放上图片变大效果
1.利用改变宽度的形式来实现通过鼠标放上将宽度增大来实现整个页面的变大.但是现实的效果会是从左上角开始增大的. 鼠标未放上的时候第一种方式鼠标放上去的时候 2.利用translateZ实现变化后 ...
720 全景 css3源码,CSS3如何实现全景图的动画效果（附代码）
本篇文章给大家带来的内容是关于CSS3如何实现全景图的动画效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 基本代码 html代码: 首先定义一些基本的样式和动画:.pa ...
ftp服务器上图片文件显示不出来,ftp服务器上图片文件显示
ftp服务器上图片文件显示内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装 ...
php 访问服务器上图片不显示,php显示云服务器上图片不显示
php显示云服务器上图片不显示内容精选换一换远程登录Windows弹性云服务器后,修改分辨率设置.不同版本的Windows操作系统,操作略有差异,本节以Windows Server 2016 标 ...

最新文章

热门文章