11旋转从左到右 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转11图</title>
	</head>
	<style>
		.bigbox{
			width: 500px;
			height: 200px;
			margin: 0 auto;
			background: yellowgreen;
			position: relative;
		}
		.smallbox{
			width:100px;
			height:40px;
			line-height: 40px;
			text-align: center;
			border-radius:8px ;
			position: absolute;
			top: 60px;
			animation: zhuan 6s infinite;
		}
		@keyframes zhuan{
			0%{background: cadetblue; transform: rotate(0deg); left: 0px;}
			10%{background: lightblue; transform: rotate(45deg); }
			11%{background: lightblue; transform: rotate(10deg); }
			80%{background: lightblue; transform: rotate(0deg); left: 80%;}
			100%{background: skyblue; transform: rotate(-1080deg); left: 0px;}
			
		}
	</style>
	<body>
		<div class="bigbox">
			<div class="smallbox">
				CSS动画
			</div>
		</div>
	</body>
</html>

　　

posted @ 2020-11-27 08:54  卿家尘归尘  阅读(69)  评论(0)  编辑  收藏  举报