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

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

贊助商

分類目錄

贊助商

最新文章

搜索

CSS如何創建淡入背景動畫

作者:admin    時間:2022-8-8 20:41:40    瀏覽:

在前面，已經介紹過圖片淡入動畫效果，文本淡入動畫效果。本文將介紹如何創建淡入背景動畫。

CSS允許你設計背景顏色漸變的網頁，要實現這一點，需要使用CSS中的animation屬性來設置body元素的樣式。

CSS如何創建淡入背景動畫

例子

假設你正在為本地電子商店創建登錄頁，要創建一個獨特的背景色淡入效果。

假設，你希望在五秒鐘內將背景色從灰色轉換為橙色，并且是循環進行。

以下是如何在CSS中實現此功能：

body
{
  background: grey;
  animation: fadebackground 5s infinite;
}
@keyframes fadebackground
{
  from
  {
    background-color: grey;
  }
  to
  {
    background-color: orange;
  }
}

完整HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body
{
  background: grey;
  animation: fadebackground 5s infinite;
}
@keyframes fadebackground
{
  from
  {
    background-color: grey;
  }
  to
  {
    background-color: orange;
  }
}
</style>
</head>
<body>
</body>
</html>

demodownload

background: grey; 是背景初始顏色，animation: fadebackground 5s infinite; animation是一個動畫屬性，fadebackground是動畫名稱，其綁定@keyframes的名稱，5s是動畫過渡時間，infinite是無限循環。

可以通過以下文章，詳細了解animation動畫屬性。

@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