#CSS特效

======================================================

1. 核心实现步骤

• 创建播放按钮结构：使用容器和图标元素

• 添加悬停效果：通过CSS过渡实现缩放和透明度变化

• 实现播放动画：使用transform和transition属性

• 添加阴影效果：增强按钮的立体感

======================================================

2. HTML结构

<div class="play-button">
  <div class="play-icon"></div>
</div>

======================================================

3. CSS样式

/* 播放按钮容器 */
.play-button {
  width: 80px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 悬停效果 */
.play-button:hover {
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* 播放图标 */
.play-icon {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid white;
  margin-left: 5px; /* 视觉居中调整 */
  transition: transform 0.3s ease;
}

/* 点击效果 */
.play-button:active .play-icon {
  transform: scale(0.9);
}

======================================================

4. 实现原理

• 圆形按钮：使用border-radius: 50%实现圆形

• 居中布局：使用flex布局实现图标居中

• 过渡动画：transition属性实现平滑的状态变化

• 悬停效果：通过transform: scale实现缩放效果

• 立体感：box-shadow属性添加阴影效果

======================================================