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

最新推荐文章于 2024-01-27 20:29:14 发布

三九不乖

最新推荐文章于 2024-01-27 20:29:14 发布

阅读量1.5k

点赞数 2

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

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

版权

本文介绍了如何使用CSS3的position、transform和rotate属性创建一个照片墙布局，当鼠标悬停在图片上时，图片会放大并覆盖其他图片，提供了一种动态的用户体验。

摘要由CSDN通过智能技术生成

简单利用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

最低0.47元/天解锁文章

三九不乖

关注

2
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
web：简单照片墙放置，鼠标悬浮放大

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

扫一扫

专栏目录

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

“相关推荐”对你有帮助么？