css实例使用照片墙代码

最新推荐文章于 2023-06-28 16:25:54 发布

原创最新推荐文章于 2023-06-28 16:25:54 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

前端css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的照片墙网页实现方案，通过HTML与CSS布局技术，实现了图片的倾斜展示及鼠标悬停时的放大和平滑过渡效果。每张图片都设置了一定的旋转角度和边框，当鼠标悬停在图片上时，图片会迅速恢复到正常位置并放大，同时边框颜色也会发生变化。

<html>
	<head>
		<title>照片墙</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			body{
				text-align:center;
				background-color:orange;
			}
			img{
				width:250px;
				height:250px;
				border:solid 1px gray;
				padding:10px;/*设置边框与图片间的距离*/
				background-color:white;
				/*设置倾斜角度，正数为顺时针转，负数为逆时针转*/
				transform:rotate(-5deg);
				/*外边距*/
				margin:10px;
			}
			
			/*使用伪类标签添加样式
				把鼠标放在上面会出现定义的效果
			*/
			img:hover{
				border:solid 2px yellow;
				transform:rotate(0deg) scale(1.2);/*0表示转正  scale表示缩放，()内设置比例*/
				z-index:1;/*设置显示优先级，会优先显示*/
				
				/*设置显示到相应大小所需要的时间*/
				transition:1.5s;
			}
		</style>
	</head>
	<body>
		<br /><br />
		<img src="img/6.jpg"/>
		<img src="img/7.jpg"/>
		<img src="img/8.jpg"/>
		<img src="img/9.jpg"/><br />
		<img src="img/10.jpg"/>
		<img src="img/11.jpg"/>
		<img src="img/12.jpg"/>
		<img src="img/13.jpg"/>
	</body>
</html>