css 制作特效

CSS 制作特效的方法

阴影效果
使用 box-shadow 属性为元素添加阴影，增强立体感。

.box {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

渐变背景
通过 linear-gradient 或 radial-gradient 实现平滑的色彩过渡。

.gradient {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}

动画效果
利用 @keyframes 和 animation 属性创建动态效果。

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

悬停交互
通过 :hover 伪类实现鼠标悬停时的变化。

.button:hover {
  background-color: #4CAF50;
  transform: scale(1.1);
}

过渡效果
使用 transition 让属性变化更平滑。

.transition {
  transition: all 0.3s ease-in-out;
}

3D 变换
通过 transform 实现 3D 空间中的旋转或位移。

.rotate-3d {
  transform: rotateY(45deg);
}

文本特效
利用 text-shadow 或混合模式增强文字表现力。

.text-glowing {
  text-shadow: 0 0 10px #fff;
}

滤镜效果
使用 filter 属性调整模糊、亮度等视觉效果。

.blur {
  filter: blur(2px);
}

自定义形状
结合 clip-path 创建非矩形元素。

.custom-shape {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

响应式特效
通过媒体查询适配不同设备。

@media (max-width: 768px) {
  .responsive-effect {
    transform: scale(0.9);
  }
}

这些方法可根据需求组合使用，实现更复杂的视觉效果。