SVG+CSS让你快速制作网易云音乐动效海报，掌握速度调节

前端

2024-01-22 18:51:48

在网易UEDC的订阅号上，笔者留意到一个动效海报《网易云音乐2018年度听歌报告》。这个创意简单且吸引眼球的海报，让我们产生尝试使用SVG+CSS动画来实现它的想法。结果在花费大约两个小时的时间后，我们顺利完成。

相比于使用AE实现，SVG+CSS动画无疑更高效。接下来，我们将详细介绍如何利用SVG+CSS制作这一海报，涵盖所需工具、步骤和代码示例。

所需工具

SVG编辑器：Adobe Illustrator、Inkscape或Sketch等
文本编辑器：Sublime Text、Atom或VSCode等
浏览器：Chrome、Firefox或Safari等

步骤

1. 创建SVG文件

首先，你需要创建一个SVG文件。你可以使用任何SVG编辑器，比如Adobe Illustrator、Inkscape或Sketch。在这个文件中，你将创建海报中的基本形状，比如自行车、人物和背景。

2. 添加CSS动画

接下来，你需要使用CSS来给SVG元素添加动画效果。你可以使用关键帧动画或过渡动画来实现这一目的。在我们的例子中，我们使用关键帧动画来创建自行车蹬踏和人物骑行的动画效果。

3. 控制动画速度

你可以通过修改CSS动画的持续时间和延迟时间来控制动画速度。在我们的例子中，我们修改了关键帧动画的持续时间，以使动画播放得更慢。

4. 完成海报

最后，你只需要将SVG文件和CSS文件链接到你的HTML文件中，就可以完成海报了。

代码示例

以下是一些代码示例，供你参考：

<svg width="100%" height="100%">
  <path id="bike" d="M0,0 L100,100" stroke="black" stroke-width="5" fill="none"/>
  <path id="person" d="M0,100 L100,0" stroke="black" stroke-width="5" fill="none"/>
</svg>

@keyframes bike-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

@keyframes person-animation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}

#bike {
  animation: bike-animation 2s infinite alternate;
}

#person {
  animation: person-animation 2s infinite alternate;
}