CSS动画与过渡结合 音乐播放器无限旋转 鼠标移入暂停效果

* {
		padding: 0;
		margin: 0;
	}
	ul, ol {
		list-style: none;
	}
	a {
		text-decoration: none;
		color: #000;
	}
	img {
		border-radius: 50%;
		border: 1px solid #000;
		/*调用*/
		-webkit-animation: rotate 4s linear infinite;
	}
	/*定义动画  旋转一周*/
	@-webkit-keyframes rotate {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	/*鼠标悬停,动画暂停*/
	img:hover {
		-webkit-animation-play-state: paused;
	}

	
	</style>
</head>
<body>
	<img src="images/baby.png" alt="">

猜你喜欢

转载自blog.csdn.net/qq_41328247/article/details/88606302
今日推荐