css制作特效

CSS 制作特效的方法

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

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

悬停动画
通过 :hover 伪类结合 transition 实现平滑过渡效果。

.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
  background-color: #ff5722;
}

渐变背景
使用 linear-gradient 或 radial-gradient 创建渐变背景。

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

文字特效
通过 text-shadow 为文字添加阴影或发光效果。

.text {
  text-shadow: 0 0 10px #00ff00;
}

3D 变换
利用 transform 属性实现 3D 旋转或平移。

.card {
  transform: rotateY(20deg);
  perspective: 1000px;
}

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

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

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

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

响应式特效
结合媒体查询 (@media) 在不同屏幕尺寸下应用不同特效。

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