当前位置：首页 > CSS

简单css特效制作

2026-03-11 23:10:31CSS

文字阴影效果

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

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

悬停放大按钮

按钮悬停时平滑放大，结合 transform 和 transition 实现过渡动画。

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

渐变背景动画

使用线性渐变背景并通过动画改变渐变角度，实现动态效果。

.gradient-bg {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  animation: gradient-shift 5s infinite alternate;
}
@keyframes gradient-shift {
  to { background-position: 100%; }
}

卡片悬停3D翻转

通过 rotateY 实现卡片悬停时的3D翻转效果，需设置父容器透视。

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

流光边框效果

利用伪元素和动画创建动态流光边框，适用于高亮显示元素。

.glow-border {
  position: relative;
  overflow: hidden;
}
.glow-border::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to bottom right, transparent, #00ffcc, transparent);
  animation: rotate-glow 3s linear infinite;
  opacity: 0.7;
}
@keyframes rotate-glow {
  to { transform: rotate(360deg); }
}

打字机文本动画

模拟逐字显示文本的效果，通过控制 width 和 overflow 实现。

简单css特效制作

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3s steps(40) forwards;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}