照片墙

2021-10-31 16:34:05 阅读：109 来源： 互联网

标签：scale 设置 img color 照片 background border

<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>

标签：scale,设置,img,color,照片,background,border
来源： https://www.cnblogs.com/valder-/p/15489877.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

照片墙