如何制作动画星星？教程步骤详解。-建站教程-锦华智联科技

使用 CSS 制作星星动画 (网页应用)

这种方法最适合网页设计师或前端开发者，可以直接在网页上实现，无需额外软件，文件体积小,加载快。

（图片来源网络，侵删）

第一步：创建星星的形状

我们不会用图片，而是用纯CSS来画一个星星,这样更灵活。

创建HTML文件: 创建一个名为 index.html 的文件,并放入以下基本结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 动画星星</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="star"></div>
</body>
</html>

用CSS画出星星: 创建一个名为 style.css 的文件，然后我们用CSS的 :before 和 :after 伪元素来画一个经典的五角星。

/* style.css */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #111; /* 深色背景，让星星更明显 */
  margin: 0;
}
.star {
  position: relative;
  display: inline-block;
  color: #ffd700; /* 星星的颜色，金色 */
  font-size: 100px; /* 控制星星的大小 */
  line-height: 1;
  width: 0.85em;
  height: 0.9em;
  /* 这部分是画星星的核心，使用字符和伪元素组合 */
  transform: rotate(35deg); /* 初始旋转一个角度 */
}
.star::before,
.star::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  background: currentColor;
  border-radius: 50%;
}
.star::before {
  transform: rotate(70deg);
}
.star::after {
  transform: rotate(-70deg);
}

在浏览器中打开 index.html,你应该能看到一个静态的金色五角星。

（图片来源网络，侵删）

第二步：添加动画效果

我们让这个星星动起来！这里提供三种经典效果：闪烁、旋转和脉冲。

效果1：闪烁

/* 在 style.css 中添加这段代码 */
.star-twinkle {
  animation: twinkle 1.5s infinite ease-in-out;
}
@keyframes twinkle {
  0%, 100% {
    opacity: 1; /* 完全不透明 */
    transform: rotate(35deg) scale(1); /* 保持原始大小 */
  }
  50% {
    opacity: 0.3; /* 变得半透明 */
    transform: rotate(35deg) scale(1.1); /* 可以稍微放大一点 */
  }
}

如何使用： 修改HTML中的 class，从 <div class="star"></div> 改为 <div class="star star-twinkle"></div>。

效果2：旋转

（图片来源网络，侵删）

/* 在 style.css 中添加这段代码 */
.star-rotate {
  animation: rotate 3s infinite linear;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

如何使用： 修改HTML中的 class，从 <div class="star"></div> 改为 <div class="star star-rotate"></div>。

效果3：脉冲

/* 在 style.css 中添加这段代码 */
.star-pulse {
  animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% {
    transform: rotate(35deg) scale(1);
  }
  50% {
    transform: rotate(35deg) scale(1.2);
  }
}

如何使用： 修改HTML中的 class，从 <div class="star"></div> 改为 <div class="star star-pulse"></div>。

使用 Adobe After Effects (AE) 制作星星动画 (视频/GIF应用)

这种方法适合制作视频、GIF或复杂的动态图形效果，效果更专业、更酷炫。

第一步：创建新合成

打开 Adobe After Effects。
点击菜单栏的 Composition > New Composition (合成 > 新建合成)。
设置一个你需要的尺寸，1920x1080，时长设为 5秒，帧率 30fps，然后点击 OK。

第二步：创建星星形状

在左侧工具栏，选择 Shape Tool (形状工具)，按住鼠标不放，选择 Polygon Tool (多边形工具)。
在顶部的工具选项栏中，将 Polygon Options (多边形选项) 中的 Number of Sides (边数) 设置为 5。
在合成窗口中，按住 Shift 键（可以画正多边形）,拖动鼠标画出一个星星。
在右侧的 Fill (填充) 颜色里，选择你喜欢的颜色，比如金色，点击 Stroke (描边) 前面的开关,去掉描边。

第三步：添加动画效果

效果1：闪烁

选中图层，按 P 键，调出 Position (位置) 属性。
按住 Alt 键，点击 Position 前面的秒表图标,创建一个表达式。
在表达式输入框中，输入 wiggle(5, 20)，这个表达式会让星星位置在每秒5次、振幅为20像素的范围内随机抖动,模拟闪烁的动感。
再按 T 键，调出 Opacity (不透明度) 属性。
点击 Opacity 前面的秒表，在时间轴0秒处设置一个关键帧，值为 100。
将时间指针移动到 1秒 处，设置关键帧，值为 30。
将时间指针移动到 5秒 处，设置关键帧，值为 100。
按空格键预览,你就能看到星星在闪烁并轻微抖动了。

效果2：旋转

选中星星图层，按 R 键，调出 Rotation (旋转) 属性。
点击 Rotation 前面的秒表，在时间轴0秒处设置关键帧，值为 0x+0° (0圈0度)。
将时间指针移动到 3秒 处，将值改为 1x+0° (1圈0度)。
按空格键预览,星星会平滑地旋转一圈。
（可选）为了让旋转更有趣，可以添加 Scale (缩放) 动画,让它一边旋转一边变大变小。

效果3：脉冲

选中星星图层，按 S 键，调出 Scale (缩放) 属性。
点击 Scale 前面的秒表，在时间轴0秒处设置关键帧，值为 100, 100。
将时间指针移动到 1秒 处，设置关键帧，值为 120, 120。
将时间指针移动到 2秒 处，设置关键帧，值为 100, 100。
按空格键预览,星星会像心跳一样进行脉冲效果。

第四步：导出动画

点击菜单栏的 Composition > Add to Adobe Media Encoder Queue (合成 > 添加到Adobe Media Encoder队列)。
在 Media Encoder 中，选择一个预设，H.264 格式,适合网络播放。
设置输出名称和位置，然后点击绿色的 Start Queue 开始渲染。
你也可以导出为 GIF：选择 Animated GIF 预设即可。

总结与对比

特性	CSS 动画	After Effects 动画
优点	轻量、加载快、易于集成到网页、对SEO友好	效果专业、控制精细、可制作复杂动画、可导出多种格式
缺点	动画效果相对简单、交互性有限	需要专业软件、学习曲线较陡、文件体积较大
适用场景	网页装饰、按钮图标、简单的交互动效	视频片头、广告、GIF、复杂的UI动效

希望这个详细的教程能帮助你成功制作出属于自己的动画星星！如果你有更具体的需求，比如想要特定的动画效果,可以随时再提问。