将CSS动画与HTML5音频同步-css教程-PHP中文网

钥匙要点

肌肉

参见Pen 5A20EF9D5C68ABC42320AC73639F0E39 by sitepoint（@sitepoint）在codepen上。

>为什么我的CSS动画不与我的HTML5音频同步？您的CSS动画没有与您的HTML5音频同步的原因有几个。一个常见的问题是动画和音频持续时间不匹配。确保CSS动画的持续时间与音频文件的长度匹配。另外，请确保您的音频文件在启动动画之前正确加载并播放。

我可以在移动设备上与HTML5音频同步CSS动画吗？，您可以在移动设备上与HTML5音频同步CSS动画。但是，请记住，与桌面浏览器相比，移动浏览器具有一些局限性和差异。例如，某些移动浏览器不允许自动播放音频，因此您可能需要为音频文件添加一个播放按钮。

首页

web前端

css教程

将CSS动画与HTML5音频同步

William Shakespeare

Feb 23, 2025 am 09:32 AM

将CSS动画与HTML5音频同步

钥匙要点

> CSS和HTML可以使用HTML的元素组合为CSS动画添加声音效果。这可以通过JavaScript触发，并且可以在某些情况下增强用户体验，例如艺术家和游戏网站或儿童的内容。 >声音动画过程中最关键的部分是将CSS动画调整为音频，以确保准确的同步音频视频体验。这涉及将动画键帧同步到音频计时数据。
>该元素用于将音频引入页面。 JavaScript用于操纵播放。在此示例中，按钮用于启动和重置轨道。在不同的浏览器中，将CSS动画与HTML5音频同步的过程通常相同。但是，并非所有浏览器都支持所有HTML5音频格式。因此，应提供多个音频文件的来源，以确保与不同的浏览器的兼容性。
>与预录的音频文件相比，可以将CSS动画与实时音频流一起使用。需要Web音频API来实时分析音频流并相应地调整CSS动画。
> CSS和HTML已经开设了一个丰富的竞争环境，用于在您的网页，Web应用程序和电子书项目中添加多媒体内容。结合这两种技术的一种创新方法是使用
尽管网络上的声音并不普遍欢迎，但在某些情况下，它可以丰富用户体验而不会成为不必要的烦恼。例如艺术家和游戏网站或儿童内容。在某些情况下，声音甚至对残疾访客很有用。

>声音动画过程中最重要的部分是将您的CSS动画调整为音频，以获得准确的同步音频视频体验。在本文中，我将使用跳动风格的心脏的有趣示例将动画键框同步到音频数据的步骤。

>请参阅pen CSS动画，带有声音：codepen上的sitepoint（@sitepoint）的心跳。

构建心脏

>我们需要的第一种成分是我们想要动画的心。我们将使用CSS伪元素构建一个。即使仅通过伪元素，它也可以在HTML中构造而不是使用图像，这使我们有机会动画各种CSS属性以创建一个更有趣的动画。

>我们通常可以找到以这种方式构建形状的多种方法，但是如果我们打算对其进行动画制作，那么值得思考几何以及不同的结构选择如何影响运动并简化关键框架代码。

>在这种情况下，最简单的技术是在顶部使用两个垂直矩形，旋转并放置以重叠以形成心脏形状。它们的尺寸是使用百分比设置的，并且绝对可以考虑一些几何学考虑，因此可以通过更改容器尺寸来缩放原始形状。矩形顺时针旋转45度，逆时针旋转以形成心脏的左右部分。

将CSS动画与HTML5音频同步将圆形的侧面设置为两个半径值，以获得椭圆形而不是圆形曲线，因此更自然的心形。由于矩形侧长的比例为5/8，因此省略号RADII计算为50％/37.5％，仅能绕过不重叠的角。

现在剩下的就是调整矩形的转换 - 原孔点，以便矩形在矩形重叠的正方形区域中心对齐。可以通过调整绝对位置声明而不是使用变换原始方法来实现相同的外观。但这后来会使密钥帧代码复杂化，因为它会迫使我们更详细地控制位置，而不是依靠变换量表功能为我们完成工作。在应用任何变换之前，应使用坐标系计算

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

登录后复制

转换 - 原始点（因为变换可以影响坐标系，例如，旋转（）函数将坐标系与元素一起旋转旋转到）。同样，侧面长度比决定了这一点的位置：很容易看出X位置在矩形的中心为50％，但是Y位置计算为从顶部测得的矩形高度的68.75％（55*100％/80 = 68.75％）。使用特定的对称方法也可以在这里支付，因为两个矩形都共享相同的变换 - 原孔点位置。

<span><span>.heart::before,
</span></span><span><span>.heart::after</span> {
</span>  <span>border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
</span><span>}</span>

登录后复制

>现在我们有了美丽的对称心形。我们可以为每个矩形添加一个插图盒子阴影，以使其全部丰满和3D。

心脏的声音

>要将音频介绍到页面中，我们将