如何使用CSS為「載入」文字建立無限循環的淡入淡出動畫？-css教學-PHP中文網

首頁

web前端

css教學

如何使用CSS為「載入」文字建立無限循環的淡入淡出動畫？

Patricia Arquette

Oct 29, 2024 am 12:11 AM

How to Create an Infinitely Looping Fading Animation for

建立一個純CSS 動畫循環來淡入淡出「載入」文字

在本教程中，我們的目標是創建一個模擬的CSS 動畫不會使用JavaScript 的淡入淡出「正在載入」文字。

問題陳述：

您已經使用關鍵影格建立了一個基本的CSS 動畫，但它沒有循環和淡入淡出

解決方案：

要建立循環動畫，請新增animation-iteration-count 和animation-direction 屬性。 animation-iteration-count 指定動畫應重複的次數，而animation-direction 確定動畫應向前或向後播放。

接下來，您必須包含特定於瀏覽器的前綴以獲得更好的相容性。

下面修改後的程式碼包含以下變更：

<code class="css">@keyframes flickerAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes flickerAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes flickerAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes flickerAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

.animate-flicker {
  -webkit-animation: flickerAnimation 1s infinite normal;
  -moz-animation: flickerAnimation 1s infinite normal;
  -o-animation: flickerAnimation 1s infinite normal;
  animation: flickerAnimation 1s infinite normal;
}</code>

用法：

將animate-flicker 類別應用到您想要「載入」的元素" 要出現的文字：

<code class="html"><div class="animate-flicker">Loading...</div></code>

這將創建一個無限動畫，使文字連續淡入和淡出。

以上是如何使用CSS為「載入」文字建立無限循環的淡入淡出動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Related knowledge

如何使用純CSS創建下拉菜單 Sep 20, 2025 am 02:19 AM

使用HTML和CSS可創建無需JavaScript的下拉菜單。 2.通過:hover偽類觸發子菜單顯示。 3.利用嵌套列表構建結構，CSS設置隱藏與懸浮顯示效果。 4.可添加過渡動畫提升視覺體驗。

如何防止圖像拉伸或縮小CSS Sep 21, 2025 am 12:04 AM

useobject-fitormax-widthwithheight：自動置換式; object-fitControlshowimagesfillcontainersfillcontainerswhilepreservingaspectratios，andmax-width：100％;高度；高度：autoEsoensuresResresresResresRessersRessiveScalingScalingWithOutStertracterging。

如何使用CSS中的指針事件屬性 Sep 17, 2025 am 07:30 AM

Thepointer-eventspropertyinCSScontrolswhetheranelementcanbethetargetofpointerevents.1.Usepointer-events:nonetodisableinteractionslikeclicksorhoverswhilekeepingtheelementvisuallyvisible.2.Applyittooverlaystoallowclick-throughbehaviortounderlyingelemen

如何使用CSS添加盒子陰影效果 Sep 20, 2025 am 12:23 AM

USETHEBOX-SHADOWPROPERTYTOADDDROPSHADOWS.DEFINEHORIZONTALANDVERTICALESTESETSETSETSETSETSETSETSETSETSETSETSETSETSETSETSETSETSETESTESTESTESTESTESTEMENG：MMULTIPLESHADOWSARECOMMA-SEPARAWS.MEULTIPLESHADOWSARECOMMA-SEPARATED.EXAMPL

如何將過濾器應用於CSS的圖像 Sep 21, 2025 am 02:27 AM

thecssfilterpropertyallowseasyagestylinglingwisslikeblur，亮度和格雷斯卡爾（Grayscale.UseFilter）：濾波器函數（值）onimagesorbackgroundImages.commonfunctionsIncludeBlurblur（px），亮度（brightness），亮度（％），偏見（％），損壞（％），sancale（％），飽和度（％）

如何在CSS中添加梯度背景 Sep 16, 2025 am 05:30 AM

要添加CSS漸變背景，使用background或background-image屬性配合linear-gradient()、radial-gradient()等函數即可；首先選擇漸變類型，設置方向與顏色，並可通過顏色停靠點、形狀、大小等參數精細控制，例如linear-gradient(toright,#ff7e5f,#feb47b)創建從左到右的線性漸變，radial-gradient(circle,#ff9a9e,#fecfef)創建圓形徑向漸變，還可通過repeating-linear-gr