CSS -------- 图片展示

最新推荐文章于 2024-07-26 14:13:59 发布

qq_42412646

最新推荐文章于 2024-07-26 14:13:59 发布

阅读量518

点赞数

本文链接：https://blog.csdn.net/qq_42412646/article/details/102643846

版权

一个网页展示的例子：

instance:

<html>
	<head>
		<title>clannad图片演示</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			body{
				text-align: center;
				background-color: grey;
				background-image: url(../img/0.jpg);
				background-size: cover;
			}
			img{
				width: 12%;
				height: 30%;
				transform: rotate(-10deg);
				background-color: white;
				padding: 10px;
				margin: 20px;
			}
			img:hover{
				transform: rotate(0deg) scale(1.3);
				z-index: 1;
				transition: 1.5s;
			}
		</style>
	</head>
	<body>
		<br /><br /><br />
		<img src="../img/1.jpg" alt="" />
		<img src="../img/2.jpg" alt="" />
		<img src="../img/3.jpg" alt="" />
		<img src="../img/4.jpg" alt="" /><br />
		<img src="../img/5.jpg" alt="" />
		<img src="../img/6.jpg" alt="" />
		<img src="../img/7.jpg" alt="" />
		<img src="../img/8.jpg" alt="" />
	</body>
</html>

其中transform是用来设置图片的显示样式的，其中rotate是进行斜体显示，-10deg表示逆时针旋转10弧度，

注：我们可以使用加margin（外边框）和背景颜色来实现给图片加边界。

可以利用img：hover来设置鼠标进入时的图片变化，其中z-index可以进行优先级的设计，

transition用来设置显示的变化持续的时间，防止运行太快。