欢迎光临
我们一直在努力

CSS怎么设置图片放大效果

这篇文章主要介绍CSS怎么设置图片放大效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

translate:代表水平和垂直的移动;

scale:代表水平和垂直同时缩放;

rotate:表示旋转的角度。

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS图片放大 - 云搜网(yisu.com)</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.yisu.com/statics/img/logo/indexlogo@2x.png" alt="w3cschool">
    </div>
</body>
</html>

以上是“CSS怎么设置图片放大效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注云搜网行业资讯频道!

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。