当前位置：首页 > CSS

css开幕效果制作

2026-03-12 06:22:07CSS

CSS 开幕效果制作方法

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

淡入效果

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

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

滑动展开效果

css开幕效果制作

.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); }
}

组合效果

css开幕效果制作

.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; }
}