当前位置：首页 > CSS

css 制作特效

2026-02-27 07:42:28CSS

文字阴影效果

通过 text-shadow 属性为文字添加阴影，增强立体感。参数依次为水平偏移、垂直偏移、模糊半径和颜色。

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

悬停放大效果

使用 transform: scale() 实现元素悬停时放大，搭配 transition 平滑过渡。

.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.1);
}

背景渐变动画

通过 linear-gradient 和动画实现动态背景渐变。

.gradient-bg {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  background-size: 200% 200%;
  animation: gradientMove 3s ease infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

按钮点击波纹效果

利用伪元素和动画模拟点击时的水波纹扩散。

.ripple-button {
  position: relative;
  overflow: hidden;
}
.ripple-button:after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: scale(0);
}
.ripple-button:active:after {
  animation: ripple 0.6s ease-out;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

3D 卡片翻转

通过 transform-style: preserve-3d 和旋转实现立体翻转效果。

.flip-card {
  perspective: 1000px;
}
.flip-card-inner {
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  backface-visibility: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);
}

流光边框效果

结合伪元素和动画创建动态流动边框。

css 制作特效

.shining-border {
  position: relative;
}
.shining-border:before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(45deg, #ff00cc, #3333ff);
  background-size: 200%;
  animation: borderShine 2s linear infinite;
}
@keyframes borderShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}