当前位置：首页 > CSS

css制作动漫

2026-04-01 14:03:25CSS

使用CSS制作动漫效果

CSS可以通过关键帧动画（@keyframes）和过渡（transition）实现丰富的动漫效果，包括角色移动、表情变化、场景切换等。

基础动画：移动效果

通过@keyframes定义动画路径，结合transform属性实现位移、旋转或缩放：

.character {
  animation: walk 2s infinite;
}

@keyframes walk {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px) rotateY(180deg); }
  100% { transform: translateX(200px); }
}

表情变化

利用background-position切换雪碧图（Sprite Sheet）实现表情变化：

.face {
  width: 64px;
  height: 64px;
  background-image: url('sprite.png');
  animation: expression 1s steps(4) infinite;
}

@keyframes expression {
  100% { background-position: -256px 0; }
}

场景过渡

通过opacity和transform实现淡入淡出或3D翻转效果：

.scene {
  transition: all 0.5s ease;
}
.scene:hover {
  opacity: 0;
  transform: rotateX(90deg);
}

进阶技巧

SVG与CSS结合

使用SVG路径动画配合CSS实现复杂轨迹运动：

.path {
  offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');
  animation: move 3s infinite;
}

@keyframes move {
  100% { offset-distance: 100%; }
}

伪元素动画

通过::before/::after创建动态装饰元素：

css制作动漫

.ball::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  animation: shine 2s infinite;
}

@keyframes shine {
  50% { transform: scale(1.5); opacity: 0.8; }
}

性能优化建议

优先使用transform和opacity属性，这些属性不会触发重排
减少动画元素数量，复杂场景可考虑使用Canvas或WebGL
为动画元素添加will-change: transform;提示浏览器优化
使用requestAnimationFrame替代setTimeout实现JavaScript动画

示例：跳动的小球

<div class="ball"></div>
<style>
.ball {
  width: 50px;
  height: 50px;
  background: #ff5e62;
  border-radius: 50%;
  animation: bounce 0.8s cubic-bezier(0.5, 0.05, 0.5, 1) infinite alternate;
}

@keyframes bounce {
  0% { transform: translateY(0) scale(1, 1); }
  90% { transform: translateY(-100px) scale(1.1, 0.9); }
  100% { transform: translateY(-100px) scale(1.1, 0.9); }
}
</style>