css特效制作

CSS 特效制作方法

悬停动画效果
通过 :hover 伪类和 transition 实现平滑过渡。例如按钮悬停变色：

.button {
  background-color: #3498db;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #2980b9;
}

阴影与光晕效果
使用 box-shadow 创建立体感或发光效果：

.glow-effect {
  box-shadow: 0 0 10px 5px rgba(255, 215, 0, 0.5);
}

渐变背景动画
结合 linear-gradient 和 @keyframes 实现动态渐变：

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-bg {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

3D 变换效果
通过 transform 属性实现旋转或透视效果：

.card {
  transform: perspective(500px) rotateY(15deg);
  transition: transform 0.5s;
}
.card:hover {
  transform: perspective(500px) rotateY(0);
}

文字特效
利用 text-shadow 和混合模式增强文字表现力：

.text-stroke {
  -webkit-text-stroke: 1px black;
  color: transparent;
}
.neon-text {
  text-shadow: 0 0 5px #fff, 0 0 10px #ff00de;
}

性能优化技巧

• 优先使用 transform 和 opacity 属性触发 GPU 加速
• 避免频繁触发重排的属性如 width/height
• 使用 will-change 预声明变化属性

  .optimized {
  will-change: transform;
  }

响应式特效适配

通过媒体查询调整特效参数：

@media (max-width: 768px) {
  .animated-bg {
    animation-duration: 3s;
  }
}