17旋转 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转17</title>
		<style>
			div:nth-child(1){
				width: 100px;
				height: 100px;
				background: darkturquoise;
				border-radius: 7px;
				margin: 30px;
				animation: remove 5s forwards infinite; /*引用动画*/
				animation-fill-mode: forwards; /*保持最后的状态使最后保持粉色*/
				text-align: center;
				line-height: 100px;
				color: #fff;
				font-weight: bold;
				position: relative;
				cursor: pointer;
			}
			@keyframes remove{
				from{transform: rotateY(0deg);left: 0;}
				25%{transform: rotateY(25deg);background: chartreuse; left: 0;}
				50%{transform: rotateY(0deg);background: chartreuse; left: 500px;}
				55%{transform: rotateY(0deg);background: chartreuse; left: 500px;}
				70%{transform: rotateY(0deg);background: chartreuse; left: 500px;}
				to{transform: rotateY(-360deg);background: salmon; left: 0;}
			}
			div:hover{
				animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div>旋转</div>
	</body>
</html>

　　

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