動畫能夠暫停animation-play-state

時間 2019-12-06

標籤動畫能夠暫停 animation play state 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.play-state {
			  width: 100px;
			  height: 100px;
			  margin: 40px;
			  text-align: center;
			  line-height: 94px;
			  border: 3px solid #e1efde;
			  border-radius: 50%;
			  animation: play-state 3s linear infinite;
			  cursor: pointer;
			}
			.play-state:hover {
			  animation-play-state: paused;
			}
			
			@keyframes play-state {
			  0% {
			    margin-left: 0;
			  }
			  100% {
			    margin-left: 200px;
			  }
			}
					</style>
	</head>
	<body>
		<div class="play-state">暫停</div>
	</body>
</html>
<script>

</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。