css开幕效果制作

CSS 开幕效果制作方法

开幕效果通常用于页面加载、广告展示或动画过渡。以下是几种常见的实现方式：

淡入效果

.fade-in {
  opacity: 0;
  animation: fadeIn 2s ease-in forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

滑动展开效果

.slide-open {
  height: 0;
  overflow: hidden;
  animation: slideOpen 1.5s ease-out forwards;
}

@keyframes slideOpen {
  from { height: 0; }
  to { height: 300px; }
}

缩放开幕效果

.zoom-open {
  transform: scale(0);
  animation: zoomOpen 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes zoomOpen {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

组合效果

.combo-effect {
  opacity: 0;
  transform: translateY(-50px);
  animation: comboEffect 1.5s ease forwards;
}

@keyframes comboEffect {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

高级开幕效果实现

3D翻转效果

.flip-container {
  perspective: 1000px;
}

.flip-open {
  transform: rotateX(90deg);
  transform-origin: top;
  animation: flipOpen 1s ease forwards;
}

@keyframes flipOpen {
  to { transform: rotateX(0deg); }
}

窗帘式开幕

.curtain {
  position: relative;
  overflow: hidden;
}

.curtain::before, .curtain::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #333;
  animation: curtainOpen 1.5s ease-out forwards;
}

.curtain::before {
  left: 0;
}

.curtain::after {
  right: 0;
}

@keyframes curtainOpen {
  to { width: 0; }
}

优化建议

• 使用will-change属性优化性能
• 考虑添加animation-delay实现序列动画
• 移动端注意性能影响，可适当简化效果
• 配合JavaScript控制动画触发时机

这些效果可以通过调整时间函数、持续时间和延迟来创建不同的视觉体验。实际应用中可根据具体场景选择或组合使用。