CSS如何设置图片放大效果？

我们浏览网页时，经常可以看到一个效果，当我们把鼠标滑过一张图片或一个区域时，图片会放大或缩小，高亮显示这效果。其实这个效果并不难实现，那么这篇文章 W3Cschool 小编就来教你 CSS 如何设置图片放大效果。

具体效果

思路：图片放大的动画效果还是由transition和transform实现。先设置 div 的初始位置，过渡的时间等，之后设置 translate，scale，rotate 等属性。

translate：代表水平和垂直的移动；

scale：代表水平和垂直同时缩放；

rotate：表示旋转的角度。

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS图片放大 - 编程狮(w3cschool.cn)</title>
	<style>
	div {
		width: 200px;
		height: 100px;
		transition: all .3s; 
	}
	div:hover {
		transform: translate(100px, 100px) scale(2) rotate(0deg);  
	}
	</style>
</head>
<body>
    <div>
	<img src="https://7n.w3cschool.cn/statics/img/logo/[email protected]" alt="w3cschool">
    </div>
</body>
</html>

以上就是 CSS 如何实现图片放大效果的全部内容。更多 CSS 相关教程请关注 W3Cschool 官网。

相关 CSS 效果：CSS如何设置图片旋转、CSS如何实现阴影效果

声明：小猿资源站是一个资源分享和技术交流平台，本站所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

相关文章