將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度，逆時針旋轉以形成心臟的左右部分。

將圓形的側面設置為兩個半徑值，以獲得橢圓形而不是圓形曲線，因此更自然的心形。由於矩形側長的比例為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。

心臟的聲音

>要將音頻介紹到頁面中，我們將

以上是將CSS動畫與HTML5音頻同步的詳細內容。更多資訊請關注PHP中文網其他相關文章！