欧美性猛交xxx嘿人猛交_又色又爽又高潮免费观看_精品国产一区二区三区久久影院_青娱乐极品视觉盛宴国产视频

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

贊助商

分類目錄

贊助商

最新文章

搜索

css實現圖片fade-in淡入動畫效果

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

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

opacity 屬性的值在0和1之間變化，0使元素完全透明，1使其完全不透明。當你將此屬性與過渡或動畫屬性結合使用時，你可以在設定的時間內在這兩種狀態之間更改元素。

如果你想將圖像從完全透明過渡到完全不透明，它將逐漸出現在頁面上。這就是所謂的淡入動畫。

  css實現圖片fade-in淡入動畫效果
圖片fade-in淡入動畫效果

例子

假設你正在為當地的電子商店設計一個登陸頁面，所有者可能會要求你在登錄頁面上添加帶有淡入動畫的圖像。首先，你需要為它創建 HTML 代碼，如下所示：

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

現在，你需要應用CSS淡入圖像以在頁面加載時將其從透明變為不透明。下面是如何在 CSS 中實現這一點：

#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

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

@Keyframes 規則

示例中，使用了@Keyframes 規則創建淡入動畫效果。

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

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

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

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

@keyframes 規則的語法

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

相關文章

標簽: 淡入動畫效果  css  
x