技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類(lèi)目錄

贊助商

最新文章

搜索

CSS為文本添加fade-in淡入動(dòng)畫(huà)效果

作者:admin    時(shí)間:2022-8-8 19:34:14    瀏覽:

在上文中，介紹了css實(shí)現(xiàn)圖片fade-in淡入動(dòng)畫(huà)效果，本文將給大家介紹如何用CSS為文本添加fade-in淡入過(guò)渡效果。

CSS為文本添加fade-in淡入動(dòng)畫(huà)效果

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

例子

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

<body>
    <h1 id="text-fade-in"> 你好！卡卡網(wǎng) </h1>
</body>

現(xiàn)在為文本添加淡入過(guò)渡，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

動(dòng)畫(huà)屬性

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

在 CSS 中，動(dòng)畫(huà)屬性是這些屬性的簡(jiǎn)寫(xiě)：

  • 動(dòng)畫(huà)名稱(chēng) animation-name
  • 動(dòng)畫(huà)持續(xù)時(shí)間 animation-duration
  • 動(dòng)畫(huà)延遲 animation-delay
  • 動(dòng)畫(huà)方向 animation-direction
  • 動(dòng)畫(huà)迭代計(jì)數(shù) animation-iteration-count
  • 動(dòng)畫(huà)速度類(lèi)型 animation-timing-function

要?jiǎng)?chuàng)建淡入效果，可以使用動(dòng)畫(huà)屬性指定動(dòng)畫(huà)名稱(chēng)和動(dòng)畫(huà)持續(xù)時(shí)間，詳細(xì)了解 CSS3 animation 6個(gè)動(dòng)畫(huà)屬性。

動(dòng)畫(huà)屬性的語(yǔ)法

Element
{
  animation: value;
}

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

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

@Keyframes 規(guī)則

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

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

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

你使用“from”選擇器應(yīng)用的樣式將逐漸更改為你使用“to”選擇器應(yīng)用的樣式。請(qǐng)記住，更改將在你為動(dòng)畫(huà)持續(xù)時(shí)間屬性指定的時(shí)間段內(nèi)發(fā)生。

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

@keyframes 規(guī)則的語(yǔ)法

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

相關(guān)文章

標(biāo)簽: 淡入動(dòng)畫(huà)效果  css  
x