HTML+CSS简单实现图片旋转放大展示功能

最新推荐文章于 2024-04-24 09:27:42 发布

PG5

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量527

点赞数 1

分类专栏：前端文章标签： html css3 前端

本文链接：https://blog.csdn.net/weixin_43823060/article/details/130969317

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.功能演示

2.代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>照片墙</title>
		<style type="text/css">
			body{
				background: burlywood;
				height: 300px;
			}
			ul{
				list-style: none;
				width: 530px;
				margin: 60px auto;
			}
			li{
				float: left;
				width: 105px;
				height: 85px;
				padding: 2px 3px;
				box-sizing: border-box;
				transform: rotate(-20deg);
				background: white;
				box-shadow: 0 0 3px black;
				opacity: 0.7;
			}
			li:nth-child(3n)
			{
				transform: rotate(20deg);
			}
			li:nth-child(4n)
			{
				transform: rotate(-20deg);
			}
			li:nth-child(7n)
			{
				transform: rotate(45deg);
			}
			li:nth-child(9n)
			{
				transform: rotate(120deg);
			}
			li:hover{
				transform: rotate(0deg) scale(2,2);
				z-index: 400;
				position: relative;
				transition: all 0.5s linear;
				opacity: 1;
			}
			img{
				width: 100px;
				height: 80px;
			}
			
		</style>
	</head>
	<body>
		<div id="">
			<ul>
				<li><a href=""><img src="../img/image1.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image10.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image11.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image12.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image13.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image14.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image15.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image2.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image3.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image4.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image5.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image6.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image7.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image8.jpg" alt="" /></a></li>
				<li><a href=""><img src="../img/image9.jpg" alt="" /></a></li>
			</ul>
		</div>
	</body>
</html>