技術(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)

贊助商

分類目錄

贊助商

最新文章

搜索

css實(shí)現(xiàn)圖片fade-in淡入動(dòng)畫效果

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

CSS允許你在圖像上添加淡入動(dòng)畫，它實(shí)際上是使用淡入效果的流行方式之一。在這種情況下，圖像將從透明過(guò)渡到不透明。在 CSS 中， opacity 屬性允許你指定元素的透明度或不透明度級(jí)別。

opacity 屬性的值在0和1之間變化，0使元素完全透明，1使其完全不透明。當(dāng)你將此屬性與過(guò)渡或動(dòng)畫屬性結(jié)合使用時(shí)，你可以在設(shè)定的時(shí)間內(nèi)在這兩種狀態(tài)之間更改元素。

如果你想將圖像從完全透明過(guò)渡到完全不透明，它將逐漸出現(xiàn)在頁(yè)面上。這就是所謂的淡入動(dòng)畫。

  css實(shí)現(xiàn)圖片fade-in淡入動(dòng)畫效果
圖片fade-in淡入動(dòng)畫效果

例子

假設(shè)你正在為當(dāng)?shù)氐碾娮由痰暝O(shè)計(jì)一個(gè)登陸頁(yè)面，所有者可能會(huì)要求你在登錄頁(yè)面上添加帶有淡入動(dòng)畫的圖像。首先，你需要為它創(chuàng)建 HTML 代碼，如下所示：

<body>
  <div id="image-fade-in">
    <img src="1.jpg">
  </div>
</body>

現(xiàn)在，你需要應(yīng)用CSS淡入圖像以在頁(yè)面加載時(shí)將其從透明變?yōu)椴煌该鳌Ｏ旅媸侨绾卧?CSS 中實(shí)現(xiàn)這一點(diǎn)：

#image-fade-in {
  background: Orange;
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 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

在此示例中，你會(huì)注意到“-ms”、“-o”、“ -webkit”和“-moz”，它們是供應(yīng)商前綴屬性。前綴屬性使淡入動(dòng)畫可以跨多個(gè)瀏覽器工作。例如，“-webkit”前綴將使淡入動(dòng)畫在 Safari、Chrome 和大多數(shù) iOS 瀏覽器上可見。

@Keyframes 規(guī)則

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

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

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

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

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

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

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

相關(guān)文章

標(biāo)簽: 淡入動(dòng)畫效果  css  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */