技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

CSS為文本添加fade-in淡入動畫效果

作者:admin    時間:2022-8-8 19:34:14    瀏覽:

在上文中，介紹了css實現圖片fade-in淡入動畫效果，本文將給大家介紹如何用CSS為文本添加fade-in淡入過渡效果。

CSS為文本添加fade-in淡入動畫效果

CSS 允許你在 text 上添加淡入動畫，它類似于它在圖像上的工作方式，只是你現在在 CSS 中創(chuàng)建文本淡入淡出。

例子

假設現在你想在網站的登錄頁面上添加一條帶有淡入效果的歡迎信息，你可以通過首先為消息創(chuàng)建 HTML 來完成此操作，如下所示：

<body>
    <h1 id="text-fade-in"> 你好！卡卡網 </h1>
</body>

現在為文本添加淡入過渡，CSS 代碼：

#text-fade-in {
  background: orange;
  display: inline-block;
  color: blue;
  font-family: Arial, sans-serif, helvetica;
  animation: fadeIn linear 3s;
  -webkit-animation: fadeIn linear 3s;
  -moz-animation: fadeIn linear 3s;
  -o-animation: fadeIn linear 3s;
  -ms-animation: fadeIn linear 3s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

demodownload

動畫屬性

在 CSS 中，當你將動畫屬性與@keyframes 規(guī)則結合使用時，你將獲得在頁面加載時發(fā)生的淡入動畫。動畫屬性允許你在設定的時間段內將元素的樣式更改為另一種樣式。

在 CSS 中，動畫屬性是這些屬性的簡寫：

  • 動畫名稱 animation-name
  • 動畫持續(xù)時間 animation-duration
  • 動畫延遲 animation-delay
  • 動畫方向 animation-direction
  • 動畫迭代計數 animation-iteration-count
  • 動畫速度類型 animation-timing-function

要創(chuàng)建淡入效果，可以使用動畫屬性指定動畫名稱和動畫持續(xù)時間，詳細了解 CSS3 animation 6個動畫屬性。

動畫屬性的語法

Element
{
  animation: value;
}

該值表示有效的 CSS 值，如fadeIn。

本實例中，animation: fadeIn linear 3s; 動畫名稱是fadeIn，它綁定到選擇器的 keyframe 名稱，linear是動畫類型（勻速），動畫類型除了linear，還有ease、ease-in、ease-out、ease-in-out，一圖理解animation屬性linear/ease/ease-in/ease-out/ease-in-out，3s是動畫持續(xù)時間。

@Keyframes 規(guī)則

示例中，使用了@Keyframes 規(guī)則創(chuàng)建淡入動畫效果。

使用@keyframes 規(guī)則，你可以逐漸更改所選元素的樣式。這就是你可以在 CSS 中創(chuàng)建動畫的方式。為此，請在 @keyframes 規(guī)則中使用動畫名稱的屬性值。

這樣，你就可以選擇適用于漸變樣式的動畫。在@keyframes規(guī)則中，你可以在應用樣式時使用“from”和“to”等選擇器。請記住，“from”和“to”選擇器與 0% 和 100% 相同。

你使用“from”選擇器應用的樣式將逐漸更改為你使用“to”選擇器應用的樣式。請記住，更改將在你為動畫持續(xù)時間屬性指定的時間段內發(fā)生。

有了這些，你可以通過使用 @keyframes 規(guī)則選擇器將元素的不透明度從0更改為1，輕松創(chuàng)建動畫 CSS 的淡入淡出。

@keyframes 規(guī)則的語法

@keyframes animation-name
{
  keyframes-selector
  {
    /* CSS 樣式 */
  }
}

相關文章

標簽: 淡入動畫效果  css  
x
  • 站長推薦
/* 左側顯示文章內容目錄 */