CD代码

点击展开版

+ 显示代码

[[html]]
<style>
/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主容器 */
.cd-box {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 25px auto;
  cursor: pointer;
  border-radius: 1px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}

/* 封面和面板边框效果 */
.cover::before, .lyrics-panel::before, .disc-panel::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 2;
}

/* 触发系统 */
#flip-trigger { display: none; }

#flip-trigger:checked + label .cd-box {
  width: 300px;
}

/* 封面系统 */
.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s;
  z-index: 3;
}

#flip-trigger:checked + label .cover {
  opacity: 0;
}

/* 内容区 */
.content {
  display: none;
  width: 300px;
  height: 150px;
}

#flip-trigger:checked + label .content {
  display: flex;
}

/* 双面板系统 */
.lyrics-panel, .disc-panel {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* 背景层优化 */
.panel-bg {
  position: absolute;
  background: url(你的封面图片URL);
  background-size: cover;
}

.lyrics-panel .panel-bg {
  width: 150%;
  height: 150%;
  left: -25%;
  top: -25%;
  filter: blur(12px) brightness(0.4);
}

.disc-panel .panel-bg {
  width: 100%;
  height: 100%;
  filter: brightness(0.6);
}

/* 修复歌词区滚动 */
.lyrics-panel {
  padding: 12px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.lyrics-text {
  color: #ddd;
  font: 7px/1.6 'Segoe UI', Arial;
  min-height: 126px;
  position: relative;
  z-index: 2;
  padding-bottom: 20px; /* 增加底部空间 */
}

/* 滚动条美化 */
.lyrics-panel::-webkit-scrollbar {
  width: 6px;
  background: rgba(0,0,0,0.3);
}

.lyrics-panel::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

/* CD系统 */
.disc-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.disc-box {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  animation: spin 18s linear infinite;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 0 25px rgba(0,0,0,0.5),
    inset 0 0 35px rgba(255,255,255,0.15);
}

/* 中心孔洞优化 */
.disc-hole {
  width: 20px;
  height: 20px;
  background: #505050;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.disc-hole::after {
  content: '';
  position: absolute;
  width: 110%;
  height: 110%;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

/* 移动端适配 */
@media (max-width: 768px) {
  .cd-box {
    width: 40vw;
    height: 40vw;
    margin: 5vw auto;
  }

  #flip-trigger:checked + label .cd-box {
    width: 80vw !important;
    height: 40vw !important;
  }

  .lyrics-panel, .disc-panel {
    width: 40vw !important;
    height: 40vw !important;
  }

  .lyrics-panel .panel-bg {
    filter: blur(8vw) brightness(0.4);
  }

  .disc-box {
    width: 85% !important;
    height: 85% !important;
  }

  .disc-hole {
    width: 4vw;
    height: 4vw;
  }

  .lyrics-text {
    font-size: 1.8vw;
    padding: 8px;
  }

  /* 移动端滚动优化 */
  .lyrics-panel {
    -webkit-overflow-scrolling: touch;
  }
}
</style>

<input type="checkbox" id="flip-trigger">
<label for="flip-trigger">
  <div class="cd-box">
    <!-- 封面 -->
    <div class="cover">
      <div class="panel-bg"></div>
      <img src="你的封面图片URL" 
           style="width:100%;height:100%;object-fit:cover">
    </div>

    <!-- 内容区 -->
    <div class="content">
      <div class="lyrics-panel">
        <div class="panel-bg"></div>
        <div class="lyrics-text" contenteditable="true">
          <h4 style="color:#fff;margin-bottom:8px;font-weight:500">标题字体</h4>
          <p>[Verse 1]</p>
          <p>点击编辑歌词...</p>
          <p>[示例文本]</p>
          <p>[超过高度出现滚动条]</p>
          <p>[更多歌词行...]</p>
          <p>[持续输入...]</p>
          <p>[底部内容]</p>
        </div>
      </div>

      <div class="disc-panel">
        <div class="panel-bg"></div>
        <div class="disc-container">
          <div class="disc-box">
            <img src="你的封面图片URL" 
                 style="width:100%;height:100%;object-fit:cover">
            <div class="disc-hole"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</label>
[[/html]]

示例

---

点击播放音频版

+ 显示代码

[[html]]
<!-- 添加音频元素 -->
<audio id="album-audio" preload="metadata" style="display: none;">
  <source src="你的音频URL" type="audio/mpeg">
</audio>

<style>
/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主容器 */
.cd-box {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 25px auto;
  cursor: pointer;
  border-radius: 1px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}

/* 封面和面板边框效果 */
.cover::before, .lyrics-panel::before, .disc-panel::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 2;
}

/* 触发系统 */
#flip-trigger { display: none; }

#flip-trigger:checked + label .cd-box {
  width: 300px;
}

/* 封面系统 */
.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s;
  z-index: 3;
}

#flip-trigger:checked + label .cover {
  opacity: 0;
}

/* 内容区 */
.content {
  display: none;
  width: 300px;
  height: 150px;
}

#flip-trigger:checked + label .content {
  display: flex;
}

/* 双面板系统 */
.lyrics-panel, .disc-panel {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* 背景层优化 */
.panel-bg {
  position: absolute;
  background: url(你的封面图片URL);
  background-size: cover;
}

.lyrics-panel .panel-bg {
  width: 150%;
  height: 150%;
  left: -25%;
  top: -25%;
  filter: blur(12px) brightness(0.4);
}

.disc-panel .panel-bg {
  width: 100%;
  height: 100%;
  filter: brightness(0.6);
}

/* 修复歌词区滚动 */
.lyrics-panel {
  padding: 12px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.lyrics-text {
  color: #ddd;
  font: 7px/1.6 'Segoe UI', Arial;
  min-height: 126px;
  position: relative;
  z-index: 2;
  padding-bottom: 20px; /* 增加底部空间 */
}

/* 滚动条美化 */
.lyrics-panel::-webkit-scrollbar {
  width: 6px;
  background: rgba(0,0,0,0.3);
}

.lyrics-panel::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

/* CD系统 */
.disc-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.disc-box {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  animation: spin 18s linear infinite;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 25px rgba(0,0,0,0.5),
    inset 0 0 35px rgba(255,255,255,0.15);
}

/* 中心孔洞优化 */
.disc-hole {
  width: 20px;
  height: 20px;
  background: #505050;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.disc-hole::after {
  content: '';
  position: absolute;
  width: 110%;
  height: 110%;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

/* 移动端适配 */
@media (max-width: 768px) {
  .cd-box {
    width: 40vw;
    height: 40vw;
    margin: 5vw auto;
  }

  #flip-trigger:checked + label .cd-box {
    width: 80vw !important;
    height: 40vw !important;
  }

  .lyrics-panel, .disc-panel {
    width: 40vw !important;
    height: 40vw !important;
  }

  .lyrics-panel .panel-bg {
    filter: blur(8vw) brightness(0.4);
  }

  .disc-box {
    width: 85% !important;
    height: 85% !important;
  }

  .disc-hole {
    width: 4vw;
    height: 4vw;
  }

  .lyrics-text {
    font-size: 1.8vw;
    padding: 8px;
  }

  /* 移动端滚动优化 */
  .lyrics-panel {
    -webkit-overflow-scrolling: touch;
  }
}

/* 音频指示器 */
.audio-indicator {
  position: absolute;
  top: 5px;
  left: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 10px;
  z-index: 4;
}
</style>

<input type="checkbox" id="flip-trigger">
<label for="flip-trigger">
  <div class="cd-box">
    <!-- 封面 -->
    <div class="cover">
      <div class="panel-bg"></div>
      <img src="你的封面图片URL"
           style="width:100%;height:100%;object-fit:cover">
    </div>

    <!-- 内容区 -->
    <div class="content">
      <div class="lyrics-panel">
        <div class="panel-bg"></div>
        <div class="lyrics-text" contenteditable="true">
          <h4 style="color:#fff;margin-bottom:8px;font-weight:500">标题字体</h4>
          <p>[Verse 1]</p>
          <p>点击编辑歌词...</p>
          <p>[示例文本]</p>
          <p>[超过高度出现滚动条]</p>
          <p>[更多行列...]</p>
          <p>[持续输入...]</p>
          <p>[底部内容]</p>
        </div>
      </div>

      <div class="disc-panel">
        <div class="panel-bg"></div>
        <div class="disc-container">
          <div class="disc-box">
            <img src="你的封面图片URL "
                 style="width:100%;height:100%;object-fit:cover">
            <div class="disc-hole"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</label>

<script>
// 音频控制功能
document.addEventListener('DOMContentLoaded', function() {
  const audio = document.getElementById('album-audio');
  const trigger = document.getElementById('flip-trigger');
  const indicator = document.querySelector('.audio-indicator');

  // 设置音频循环播放
  audio.loop = true;

  // 监听复选框变化
  trigger.addEventListener('change', function() {
    if (this.checked) {
      // 展开时播放音乐
      audio.play().catch(function(e) {
        console.log('音频播放失败:', e);
        indicator.textContent = '♪ 播放失败';
      });
      indicator.style.display = 'block';
    } else {
      // 关闭时暂停音乐
      audio.pause();
      indicator.style.display = 'none';
    }
  });

  // 初始隐藏音频指示器
  indicator.style.display = 'none';
});
</script>
[[/html]]

示例