纯CSS实现可爱果冻怪兽动画：手把手教你制作徘徊弹跳的网页角色

来源：站长平台作者：陈平安
导读：本期聚焦于小伙伴创作的《纯CSS实现可爱果冻怪兽动画：手把手教你制作徘徊弹跳的网页角色》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《纯CSS实现可爱果冻怪兽动画：手把手教你制作徘徊弹跳的网页角色》有用，将其分享出去将是对创作者最好的鼓励。

如何使用纯CSS实现徘徊的果冻怪兽

在前端开发中，使用纯CSS制作生动有趣的动画效果，不仅能提升页面的视觉吸引力，还能锻炼我们对CSS动画属性的掌控能力。今天我们就来一步步实现一个可爱的果冻怪兽——它拥有Q弹的身体、呆萌的表情，并且在页面上左右徘徊移动，仿佛一只迷路的小精灵。

这个动画的核心技术点包括CSS关键帧动画（@keyframes）、弹性变换（transform）、圆角造型（border-radius）以及半透明渐变色的运用。无需任何JavaScript，全凭CSS完成。让我们开始吧。

一、果冻怪兽的设计思路

在动手写代码之前，我们先构思一下这只怪兽的样子和运动方式：

  • 身体：一个圆润、半透明的果冻状主体，带有柔和的光泽感
  • 眼睛：一双大大的、有点不对称的眼睛，显得呆萌
  • 嘴巴：简单弯曲的线条，呈现微笑或微微惊讶的表情
  • 触角/小角：头顶有两个小小的突起，增加趣味性
  • 徘徊动作：在水平方向上来回移动，伴随轻微的弹跳和形变，模拟果冻的质感

整体色调采用柔和的粉紫色渐变，配合暖色背景，营造出轻松可爱的氛围。

二、HTML结构搭建

我们使用最简洁的嵌套结构来描述怪兽的各个部分。每个部位都是一个独立的 <div> 元素，通过类名来控制样式和动画。

<div class="scene">
  <div class="monster">
    <!-- 头顶触角 -->
    <div class="horn left-horn"></div>
    <div class="horn right-horn"></div>
    <!-- 眼睛 -->
    <div class="eye left-eye">
      <div class="pupil"></div>
    </div>
    <div class="eye right-eye">
      <div class="pupil"></div>
    </div>
    <!-- 嘴巴 -->
    <div class="mouth"></div>
    <!-- 腮红（可选） -->
    <div class="blush left-blush"></div>
    <div class="blush right-blush"></div>
  </div>
</div>

解释一下各部分的用途：

  • .scene 是舞台容器，控制整个动画的显示区域和透视效果
  • .monster 是怪兽主体，负责整体徘徊位移和果冻弹性
  • .horn 是头顶的两个小触角，会跟随身体轻微晃动
  • .eye 和 .pupil 构成眼睛，瞳孔可以独立转动或缩放
  • .mouth 用边框或伪元素制作弯曲的嘴巴
  • .blush 是脸颊的腮红，增加可爱度

提示： 如果你希望怪兽的表情有更多变化，可以增加多个嘴巴或眼睛的状态类，通过切换类名来改变表情。本文我们只实现一个基本款。

三、CSS基础样式与布局

我们先设定舞台和怪兽的基本形态，使用相对定位与绝对定位来排列各部分。

/* 舞台容器 */
.scene {
  width: 400px;
  height: 300px;
  margin: 40px auto;
  position: relative;
  background: linear-gradient(145deg, #ffecd2, #fcb69f);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* 怪兽主体 */
.monster {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 120px;
  height: 140px;
  margin-left: -60px;
  background: radial-gradient(circle at 40% 30%, #f9a8d4, #c084fc);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  box-shadow: 
    inset 0 -20px 40px rgba(255,255,255,0.3),
    inset 0 20px 40px rgba(0,0,0,0.1),
    0 15px 30px rgba(0,0,0,0.15);
  /* 动画将在后面添加 */
}

/* 触角 */
.horn {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #c084fc;
  border-radius: 50% 50% 20% 20%;
  top: -12px;
}
.left-horn {
  left: 30px;
  transform: rotate(-20deg);
}
.right-horn {
  right: 30px;
  transform: rotate(20deg);
}

/* 眼睛 */
.eye {
  position: absolute;
  width: 32px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  top: 40px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.left-eye {
  left: 24px;
}
.right-eye {
  right: 24px;
}

/* 瞳孔 */
.pupil {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 14px;
  height: 16px;
  margin-left: -7px;
  background: #2d2d2d;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* 嘴巴 */
.mouth {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 40px;
  height: 16px;
  margin-left: -20px;
  border-bottom: 4px solid #6b21a8;
  border-radius: 0 0 20px 20px;
}

/* 腮红 */
.blush {
  position: absolute;
  width: 24px;
  height: 14px;
  background: rgba(255, 150, 150, 0.4);
  border-radius: 50%;
  top: 70px;
}
.left-blush {
  left: 10px;
}
.right-blush {
  right: 10px;
}

以上代码将怪兽的各个部分定位到身体上。注意 .monster 使用了 border-radius 的不对称值（如 50% 50% 45% 45% / 60% 60% 40% 40%），让身体呈现上宽下窄的果冻形态，更接近Q版角色。

四、核心动画：徘徊与果冻弹性

现在进入最关键的部分——动画。我们需要实现两种运动：

  1. 水平徘徊：怪兽在舞台上左右移动
  2. 果冻弹性：移动过程中身体发生挤压、拉伸和 bounce 效果

我们通过两个 @keyframes 分别控制这两种效果，然后将它们组合应用到 .monster 上。

/* 徘徊移动动画 */
@keyframes wander {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(80px);
  }
  50% {
    transform: translateX(0px);
  }
  75% {
    transform: translateX(-80px);
  }
  100% {
    transform: translateX(0px);
  }
}

/* 果冻弹性动画（挤压与拉伸） */
@keyframes jelly {
  0% {
    transform: scale(1, 1) translateY(0);
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  }
  15% {
    transform: scale(0.9, 1.1) translateY(-8px);
    border-radius: 55% 55% 40% 40% / 50% 50% 50% 50%;
  }
  30% {
    transform: scale(1.05, 0.95) translateY(4px);
    border-radius: 48% 48% 48% 48% / 62% 62% 38% 38%;
  }
  45% {
    transform: scale(0.95, 1.05) translateY(-4px);
    border-radius: 52% 52% 42% 42% / 56% 56% 44% 44%;
  }
  60% {
    transform: scale(1.02, 0.98) translateY(2px);
    border-radius: 49% 49% 46% 46% / 59% 59% 41% 41%;
  }
  80% {
    transform: scale(1, 1) translateY(0);
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  }
  100% {
    transform: scale(1, 1) translateY(0);
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  }
}

/* 将动画应用到怪兽主体 */
.monster {
  /* 继承之前的样式 ... */
  animation: 
    wander 4s ease-in-out infinite,
    jelly 1.2s ease-in-out infinite;
}

说明： wander 动画周期为4秒，让怪兽在 ±80px 范围内来回移动。jelly 动画周期为1.2秒，持续模拟果冻的弹性形变。两者同时作用，就产生了“一边徘徊一边弹动”的效果。你可以调整时间和幅度来改变节奏。

为了让效果更自然，我们给触角也加上跟随动画：

.horn {
  /* 继承之前的样式 ... */
  animation: hornBob 1.2s ease-in-out infinite;
}

@keyframes hornBob {
  0%, 100% {
    transform: rotate(-20deg) translateY(0);
  }
  50% {
    transform: rotate(-25deg) translateY(-6px);
  }
}

.right-horn {
  animation: hornBobRight 1.2s ease-in-out infinite;
}

@keyframes hornBobRight {
  0%, 100% {
    transform: rotate(20deg) translateY(0);
  }
  50% {
    transform: rotate(25deg) translateY(-6px);
  }
}

五、增加瞳孔追踪与表情细节

虽然我们无法用纯CSS实现真正的“眼神追踪”，但可以做一个简单的瞳孔左右摆动的效果，让怪兽看起来像是在好奇地张望。这与 wander 动画同步，效果会非常生动。

/* 瞳孔左右摆动 */
@keyframes pupilMove {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(4px);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0);
  }
}

.pupil {
  animation: pupilMove 4s ease-in-out infinite;
}

嘴巴也可以增加一个轻微的弧度变化，让表情更丰富：

@keyframes mouthChange {
  0%, 100% {
    border-bottom-width: 4px;
    border-radius: 0 0 20px 20px;
  }
  50% {
    border-bottom-width: 6px;
    border-radius: 0 0 24px 24px;
  }
}

.mouth {
  animation: mouthChange 1.2s ease-in-out infinite;
}

12>末页

CSS动画keyframes果冻怪兽transform动画前端特效

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。

上一篇纯CSS实现小球变矩形背景的悬停按钮动画效果教程

下一篇CSS表格边框样式设置全攻略：从基础设置到高级美化技巧

猜你喜欢

内容垂直聚焦
专注技术核心技术栏目，确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计，为用户提供无干扰的纯技术知识沉淀，精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。前端、网络、数据库、服务器、建站、系统层层递进，构建清晰学习路径，帮助用户系统化掌握网站开发与运维所需的核心技术栈。
深度技术解析
拒绝泛泛而谈，深入技术细节与实践难点。无论是数据库优化还是服务器配置，均结合真实场景与代码示例进行剖析，致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端逻辑，从数据库操作到服务器运维，形成完整闭环，一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性，步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目，显著缩短从学习到实践的距离，快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代，紧跟主流技术发展趋势，为用户提供经久不衰的学习价值。

站长平台 - 负责任网站 - 免责声明 - 隐私政策

举报邮箱：chomcom@qq.com

Copyright (C) www.ipipp.com All Rights Reserved.