CSS完成电脑鼠☀标移入时照片的变大实际效果及

日期:2021-03-23 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

transform:scale()能够完成按占比变大或是变小作用。
transition能够设定动漫实行的時间,完成迟缓或是迅速的实行动漫,实际效果图以下:

源代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css完成电脑鼠标移入时的变大实际效果</title>
        <style type="text/css">
        	div{
        		width: 200px;
        		height: 300px;
        		margin:0 auto;
        		margin-top: 100px;
        	}
        	div img{
        		width: 100%;
        		height: 100%;
        		transition: all 0.6s;    //设定动漫实行的時间为0.6s
        		cursor: pointer;
        	}
        	div img:hover{
        		transform: scale(1.2);     //设定照片依照占比变大1.2倍
        	}
        </style>
	</head>
	<body>
		<div>
			<img src="images/unnamed.jpg">
		</div>
	</body>
</html>

- 照片外溢div时蒙版:

源代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css完成电脑鼠标移入时的变大实际效果</title>
        <style type="text/css">
        	div{
        		width: 200px;
        		height: 300px;
        		margin:0 auto;
        		margin-top: 100px;
        		overflow: hidden;    //照片超过div一部分掩藏
        	}
        	div img{
        		width: 100%;
        		height: 100%;
        		transition: all 0.6s;    //设定动漫实行的時间为0.6s
        		cursor: pointer;
        	}
        	div img:hover{
        		transform: scale(1.3);     //设定照片依照占比变大1.3倍
        	}
        </style>
	</head>
	<body>
		<div>
			<img src="images/unnamed.jpg">
		</div>
	</body>
</html>

到此这篇有关CSS完成电脑鼠标移入时照片的变大实际效果及迟缓衔接实际效果的实例编码的文章内容就详细介绍到这了,大量有关css电脑鼠标移入照片变大內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!