css打造图片转动

最新推荐文章于 2023-08-21 11:04:26 发布

杨传波

最新推荐文章于 2023-08-21 11:04:26 发布

阅读量256

点赞数

文章标签：纯CSS打造图片转动

本文链接：https://blog.csdn.net/weixin_39563863/article/details/77478779

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多彩照片墙</title>
<style type="text/css">
	.container{
		width: 1200px;
		margin: 50px auto;
	}
	.container li{
		list-style: none;
		float: left;
		margin: 20px 20px;
		padding: 5px;
		border-radius: 5px;/*圆角边框*/
		box-shadow: 0 0 2px rgba(0,0,0,.5);
		transition: all 3s ease-out;/*转动速度*/
	}
	.container li img{
		height: 190px;
		width: 230px;
		border-radius: 5px;
		vertical-align: bottom;
	}
	/*是照片墙艺术倾斜   动画效果*/
	/*第一张图片 沿X轴旋转30°*/
	.container li:nth-child(1)/*找到li表第一个*/{
		transform: rotate(30deg);
	}
	.container li:nth-child(2)/*找到li表第二个*/{
		transform: rotate(-15deg);
	}
	.container li:nth-child(3)/*找到li表第三个*/{
		transform: rotate(25deg);
	}
	.container li:nth-child(4)/*找到li表第二个*/{
		transform: rotate(-20deg);
	}
	.container li:nth-child(5)/*找到li表第二个*/{
		transform: rotate(-20deg);
	}
	.container li:nth-child(6)/*找到li表第二个*/{
		transform: rotate(-5deg);
	}
	.container li:nth-child(7)/*找到li表第二个*/{
		transform: rotate(-15deg);
	}
	.container li:nth-child(8)/*找到li表第二个*/{
		transform: rotate(-40deg);
	}
	/*鼠标移上去，照片恢复原样，缩放效果*/
	.container li:hover{
		transform: scale(1.1)/*缩放大小为原来的1.1倍*/;
		transition: all 0.5s ease-out;
	}
</style>
</head>

<body>
<div class="container">
	<ul>
		<li><img src="HTML练习/images/img.jpg" /></li>/*插入自己的图片就可以*/
		<li><img src="HTML练习/images/img1.jpg" /></li>
		<li><img src="HTML练习/images/img2.jpg" /></li>
		<li><img src="HTML练习/images/img3.jpg" /></li>
		<li><img src="HTML练习/images/img4.jpg" /></li>
		<li><img src="HTML练习/images/img5.jpg" /></li>
		<li><img src="HTML练习/images/img6.jpg" /></li>
		<li><img src="HTML练习/images/img7.jpg" /></li>
	</ul>
</div>
</body>
</html>

杨传波

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css打造图片转动

多彩照片墙 .container{ width: 1200px; margin: 50px auto; } .container li{ list-style: none; float: left; margin: 20px 20px; padding: 5px; border-radius: 5px;/*圆角边框*/ box-shadow: 0 0 2px
复制链接

扫一扫