当前位置：首页 > CSS

简单css特效制作

2026-02-13 10:22:55CSS

悬停放大效果

通过transform: scale()实现鼠标悬停时元素放大，搭配transition平滑过渡：

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

渐变背景动画

使用@keyframes创建颜色渐变动画：

简单css特效制作

.box {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  animation: gradientBG 5s ease infinite;
}
@keyframes gradientBG {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

按钮点击波纹效果

通过伪元素实现Material Design风格的涟漪效果：

简单css特效制作

.btn {
  position: relative;
  overflow: hidden;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255,255,255,0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}
.btn:focus:after {
  animation: ripple 1s ease-out;
}
@keyframes ripple {
  0% { transform: scale(0, 0); opacity: 1; }
  100% { transform: scale(25, 25); opacity: 0; }
}

文字打字机效果

模拟逐字显示的文字动画：

.typewriter {
  overflow: hidden;
  border-right: 2px solid #333;
  white-space: nowrap;
  animation: typing 3.5s steps(40), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #333 }
}

卡片3D翻转效果

利用transform-style: preserve-3d创建立体翻转：

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