html关于图片缓慢放大

最新推荐文章于 2023-07-10 20:22:45 发布

相须之殷

最新推荐文章于 2023-07-10 20:22:45 发布

阅读量2.2k

点赞数 4

分类专栏： HTML+JS 文章标签： html css css3

本文链接：https://blog.csdn.net/m0_58522778/article/details/123493875

版权

HTML+JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html关于图片缓慢放大

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				overflow: hidden;
			}
			img{
				display: block;
				width: 100%;
				height: 100%;
				transition: all 1s;
			}
			img:hover{
				transform: scale(1.4);
			}
		</style>
	</head>
	<body>
		<div>
			<img src="../img/dog.jpg" />
		</div>
	</body>
</html>

效果图如下
在这里插入图片描述

理论：
1.给图片一个div作为img的父级盒子
2.img设置和父级盒子一样大小
3.伪类选择器 :hover
4.在:hover中用transform:scale()给图片放大，数值越大放大效果越大
5.图片直接放大，没有缓冲，不够美化，所以在img中设置缓冲transition: all 1s ; 缓慢放大时间可自选
6.将img设置display:block ; 即设为块元素从而设置img的宽高和内外边距

优惠劵

相须之殷

关注关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html关于图片缓慢放大

html关于图片缓慢放大代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; border: 1px solid red; overflow: hidden;
复制链接

扫一扫