HTML黑胶唱片旋转播放器代码 - 简单易懂的实现 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>HTML黑胶唱片旋转播放器</title>
	<style>
		#vinyl {
			position: relative;
			width: 300px;
			height: 300px;
			background-color: #444;
			border-radius: 50%;
			margin: 50px auto;
			animation: rotate 5s linear infinite;
		}
<pre><code>	#vinyl::before {
		content: &quot;&quot;;
		position: absolute;
		width: 280px;
		height: 280px;
		background-color: #111;
		border-radius: 50%;
		top: 10px;
		left: 10px;
	}

	#vinyl::after {
		content: &quot;&quot;;
		position: absolute;
		width: 250px;
		height: 250px;
		background-color: #fff;
		border-radius: 50%;
		top: 25px;
		left: 25px;
	}

	#needle {
		position: absolute;
		width: 30px;
		height: 100px;
		background-color: #111;
		border-radius: 10px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	@keyframes rotate {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div id='vinyl'></div>
	<div id='needle'></div>
</body>
</html>