请写一个html黑胶音乐旋转播放器代码

日期: 2026-08-24

标签: 科技

<!DOCTYPE html>
<html>
<head>
	<title>黑胶音乐旋转播放器</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

原文地址: https://www.cveoy.top/t/topic/hmWn 著作权归作者所有。请勿转载和采集!