css特效制作

CSS 特效制作方法

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

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

阴影与模糊效果
使用 box-shadow 和 filter: blur() 创建立体感或毛玻璃效果：

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.blur-bg {
  filter: blur(5px);
}

关键帧动画
通过 @keyframes 定义复杂动画序列，适用于加载图标或动态元素：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 2s linear infinite;
}

3D 变换效果
利用 transform 属性实现旋转、缩放等交互效果：

.cube {
  transform: rotateX(20deg) rotateY(30deg);
  transition: transform 0.5s;
}
.cube:hover {
  transform: rotateX(40deg) rotateY(60deg);
}

渐变与混合模式
使用 background: linear-gradient() 和 mix-blend-mode 增强视觉层次：

.header {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.overlay {
  mix-blend-mode: multiply;
}

响应式特效适配
通过媒体查询确保特效在不同设备上的兼容性：

@media (max-width: 768px) {
  .animation {
    animation-duration: 1s; /* 移动端减少动画时间 */
  }
}

滚动视差效果
结合 background-attachment: fixed 实现滚动时的动态背景：

.parallax {
  background-image: url("bg.jpg");
  background-attachment: fixed;
  min-height: 500px;
}