css 音频动画_将CSS动画与HTML5音频同步

css 音频动画

CSS and HTML have opened a rich playing field for adding multimedia content to your web page, web app, and e-book projects. One innovative way of combining these two technologies is adding sound effects to your CSS animations using <audio> elements and triggering them with a little bit of JavaScript.

CSS和HTML为在您的网页，Web应用程序和电子书项目中添加多媒体内容开辟了一个广阔的竞争环境。 结合这两种技术的一种创新方法是使用<audio>元素在CSS动画中添加声音效果，并使用少量JavaScript触发它们。

Although sound on the web isn’t universally welcome, there are cases when it can enrich the user experience without being an unnecessary annoyance. Examples are artist and gaming websites or content for children. Sound can even be useful in certain cases to visitors with disabilities.

尽管不普遍欢迎网络上的声音，但在某些情况下它可以丰富用户体验而又不会造成不必要的烦恼。 例如艺术家和游戏网站或儿童内容。 在某些情况下，声音甚至对残障游客很有用。

The most important part of the sound animation process is adjusting your CSS animation to the audio to achieve an accurate in-sync audio-visual experience. In this article I’ll go through the steps of syncing animation keyframes to audio timing data using an interesting example of a beating stylized heart.

声音动画过程中最重要的部分是将CSS动画调整为音频，以获得准确的同步视听体验。 在本文中，我将使用一个有趣的跳动的程式化示例，介绍将动画关键帧同步到音频定时数据的步骤。

See the Pen CSS Animation with Sound: Heartbeat by SitePoint (@SitePoint) on CodePen.

见笔CSS动画与声音：心跳由SitePoint( @SitePoint上) CodePen 。

构造心 (Constructing the Heart)

The first ingredient we need is a heart we want to animate. We will construct one using CSS pseudo-elements. Having it constructed in HTML rather than using an image, even if only through pseudo-elements, gives us the opportunity to animate various CSS properties to create a more interesting animation.

我们需要的第一个要素是我们要赋予生命的心。 我们将使用CSS伪元素构造一个。 即使仅通过伪元素，也可以用HTML而不是使用图像来构造它，这使我们有机会对各种CSS属性进行动画处理以创建更有趣的动画。

We can often find more than one way to build a shape this way, but if we plan to animate it it’s worth thinking about geometry and how different structural choices affect movement and simplify the keyframes code.

我们经常可以找到不止一种这样的形状来创建形状，但是如果要对其进行动画处理，则值得考虑几何形状以及不同的结构选择如何影响运动并简化关键帧代码。

In this case the simplest technique is to use two vertical rectangles rounded on top, rotated, and positioned to overlap to form a heart shape. Their size is set using percentages and they’re absolutely positioned with a bit of geometry consideration so it’s easy to scale the original shape by changing the container size. The rectangles are rotated 45 degrees clockwise and counterclockwise to form the left and right parts of the heart.

在这种情况下，最简单的技术是使用两个在顶部倒圆 ，旋转并定位为重叠以形成心形的垂直矩形。 它们的大小是使用百分比设置的，并且它们在定位时完全考虑了几何形状，因此可以很容易地通过更改容器大小来缩放原始形状。 矩形顺时针和逆时针旋转45度，形成心脏的左右部分。

.heart::before, 
.heart::after {
  background-color: red;
  content: "";
  height: 80%;
  left: 25%;
  position: absolute;
  top: 2%;
  transform: translateZ(0) rotate(-45deg);
  width: 50%;    
}

.heart::after {
  transform: translateZ(0) rotate(45deg);
}

Rounded sides are set with two radii values to get an elliptic rather than circular curve, and therefore a more natural heart shape. Because rectangle side lengths have a 5/8 ratio, the ellipsis radii calculate to 50%/37.5% to round off only the corners