图片旋转css

629 阅读1分钟

封闭日久的心,遇见你之后,冰川融化,万木回春。

前端QQ群: 981668406 在此附上我的QQ: 2489757828 有问题的话可以一同探讨 我的github: 李大玄 我的私人博客: 李大玄 我的npm开源库: 李大玄
我的简书: 李大玄 我的CSDN: 李大玄 我的掘金: 李大玄 哔哩哔哩: 李大玄

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>图片循环旋转</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.ta_c {
			text-align: center;
			margin-top: 100px;
		}
		@-webkit-keyframes rotation {
			from {
				-webkit-transform: rotate(0deg);
			}
			to {
				-webkit-transform: rotate(360deg);
			}
		}
		.Rotation {
			-webkit-transform: rotate(360deg);
			animation: rotation 10s linear infinite;
			-moz-animation: rotation 10s linear infinite;
			-webkit-animation: rotation 10s linear infinite;
			-o-animation: rotation 10s linear infinite;
		}
		.img {
			border-radius: 250px;
		}
	</style>
</head>
<body>
	<div class="ta_c">
		<img class="Rotation img" src="https://dss2.bdstatic.com/kfoZeXSm1A5BphGlnYG/skin/881.jpg?2" width="500"
			height="500" />
	</div>
</body>
</html>