当前位置：首页 > CSS

简单css特效制作

2026-01-28 16:03:46CSS

CSS 文字阴影效果

为文字添加阴影效果可以通过 text-shadow 属性实现。该属性接受水平偏移、垂直偏移、模糊半径和颜色值。

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

CSS 悬停放大效果

使用 transform: scale() 属性可以实现元素悬停时的放大效果，配合 transition 属性让动画更平滑。

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

CSS 渐变背景动画

通过 linear-gradient 和 background-position 结合，可以创建动态渐变背景效果。

简单css特效制作

.gradient-bg {
  background: linear-gradient(90deg, #ff8a00, #e52e71, #ff8a00);
  background-size: 200% auto;
  animation: gradient 3s linear infinite;
}

@keyframes gradient {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

CSS 按钮点击效果

使用 :active 伪类和 transform 属性可以创建按钮点击时的下压效果。

.btn-press {
  transition: transform 0.1s ease;
}
.btn-press:active {
  transform: translateY(2px);
}

CSS 卡片悬停3D效果

通过 transform-style 和 perspective 属性可以创建3D翻转效果。

简单css特效制作

.card-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}
.card-3d:hover {
  transform: rotateY(180deg);
}

CSS 加载动画

使用 @keyframes 可以创建各种加载动画效果。

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #09f;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

CSS 文字渐变色效果

通过 background-clip 和 text-fill-color 属性可以实现文字渐变色。

.gradient-text {
  background: linear-gradient(to right, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

CSS 边框动画效果

使用 :before 或 :after 伪元素可以创建边框动画效果。

.animated-border {
  position: relative;
}
.animated-border::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #e52e71;
  transition: width 0.3s ease;
}
.animated-border:hover::after {
  width: 100%;
}