当前位置：首页 > CSS

css音盘制作

2026-04-02 18:50:35CSS

CSS音盘制作方法

使用CSS可以创建视觉上的音盘（唱片）效果，结合动画实现旋转效果。以下是实现步骤：

HTML结构

<div class="vinyl">
  <div class="vinyl-center"></div>
  <div class="vinyl-label">Music</div>
</div>

CSS样式

.vinyl {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(135deg, #333 0%, #000 100%);
  position: relative;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  animation: spin 2s linear infinite;
}

.vinyl-center {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vinyl-label {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #f5f5f5;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 10px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

添加唱针效果

要完整模拟唱片机，可以添加唱针元素：

<div class="turntable">
  <div class="vinyl"></div>
  <div class="tonearm"></div>
</div>

.turntable {
  position: relative;
  width: 300px;
  height: 300px;
  background: #ddd;
  border-radius: 5px;
  padding: 20px;
}

.tonearm {
  position: absolute;
  width: 120px;
  height: 4px;
  background: #333;
  top: 50px;
  left: 150px;
  transform-origin: left center;
  transform: rotate(-20deg);
}

.tonearm:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #555;
  border-radius: 50%;
  right: -5px;
  top: -3px;
}

交互控制

通过JavaScript添加播放/暂停控制：

const vinyl = document.querySelector('.vinyl');
let isPlaying = false;

vinyl.addEventListener('click', () => {
  isPlaying = !isPlaying;
  if(isPlaying) {
    vinyl.style.animationPlayState = 'running';
  } else {
    vinyl.style.animationPlayState = 'paused';
  }
});

高级效果

添加唱片纹理效果：

css音盘制作

.vinyl {
  /* 其他样式 */
  background: 
    radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.8) 31%),
    repeating-radial-gradient(circle at center, #111, #111 1px, #222 1px, #222 2px);
}

这些CSS技术可以创建出逼真的唱片视觉效果，通过调整颜色、尺寸和动画参数可以获得不同的风格。

标签: css