web：简单照片墙放置，鼠标悬浮放大

最新推荐文章于 2024-01-21 20:20:52 发布

三九不乖

最新推荐文章于 2024-01-21 20:20:52 发布

阅读量1.5k

点赞数 2

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

本文链接：https://blog.csdn.net/liyujiederizhi/article/details/126424460

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简单利用position， transform，rotate制作如下照片墙效果，鼠标点击放大当前图片并且覆盖其他照片。

在这里插入图片描述
主体部分：index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	
	#链接样式部分
	<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
	
	<div class="box" id="box">
		#以下为图片地址
		<img src="img/10.jpg" >
		<img src="img/2.jpg" >
		<img src="img/3.jpg" >
		<img src="img/4.jpg" >
		<img src="img/5.jpg" >
		
		<img src="img/6.jpg" >
		<img src="img/7.jpg" >
		
		<img src="img/8.jpg" >
		<img src="img/9.jpg" >
		<img src="img/1.jpg" >
	</div>
	</body>
</html>

CSS部分：new_file.css

div img:nth-child(even){
			width: 200px;
			
		}
		div img:nth-child(odd){
			width: 300px;
		}
		.box{
			margin: 300px auto;
			width: 940px;
			position: relative;
		}
		.box img{
			padding: 1px solid #ddd;
			border: 10px;
			position: absolute;
			background: #fff;
			z-index:1;
		}
		.box img:nth-child(1){
			top: 0px;
			left: 30px;
			transform: rotate(-15deg);
		}
		.box img:nth-child(2){
			top: -50px;
			left: 600px;
			transform: rotate(-20deg);
		}
		.box img:nth-child(3){
			bottom: 0;
			right: 0;
			transform: rotate(15deg);
		}
		.box img:nth-child(4){
			bottom: 0;
			left: 400px;
			transform: rotate(-20deg);
		}
		.box img:nth-child(5){
			bottom: 0;
			left: 600px;
			transform: rotate(-30deg);
		}
		.box img:nth-child(6){
			top: 0;
			left: 0;
			transform: rotate(20deg);
		}
		.box img:nth-child(7){
			top: 0;
			left: 700px;
			transform: rotate(20deg);
		}
		.box img:nth-child(8){
			bottom: -20px;
			right: 500px;
			transform: rotate(30deg);
		}
		.box img:nth-child(9){
			top: 90px;
			left: 550px;
			transform: rotate(15deg);
		}
		.box img:nth-child(10){
			top: 20px;
			left: 350px;
			transform: rotate(-10deg);
		}
		#box img:hover{
			box-shadow: 5px 5px 5px #ddd;
			z-index: 2;
			transform: rotate(0deg) scale(1.5);
			
		}