css特效制作教程

CSS 特效制作方法

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

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

阴影与渐变
通过 box-shadow 和 linear-gradient 增强立体感：

.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

3D 变换效果
利用 transform 属性实现旋转或缩放：

.element {
  transform: rotateY(20deg) scale(1.05);
  perspective: 1000px;
}

关键帧动画
通过 @keyframes 定义复杂动画序列：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.ball {
  animation: bounce 2s infinite;
}

文字特效
使用 text-shadow 和混合模式：

.text {
  text-shadow: 2px 2px 4px #000;
  mix-blend-mode: overlay;
}

响应式特效
结合媒体查询适配不同设备：

@media (max-width: 768px) {
  .menu {
    transform: translateX(-100%);
    transition: transform 0.5s;
  }
}

SVG 与 CSS 结合
控制 SVG 元素的样式和动画：

svg path {
  fill: transparent;
  stroke: #000;
  stroke-dasharray: 1000;
  animation: dash 5s linear forwards;
}

滤镜效果
应用 filter 实现模糊或颜色调整：

.image {
  filter: blur(2px) brightness(120%);
}

滚动视差
通过 background-attachment 创建动态背景：

.parallax {
  background-attachment: fixed;
  background-position: center;
}