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

贊助商

分類目錄

贊助商

最新文章

搜索

CSS如何創(chuàng)建淡入背景動畫

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

在前面，已經(jīng)介紹過圖片淡入動畫效果，文本淡入動畫效果。本文將介紹如何創(chuàng)建淡入背景動畫。

CSS允許你設(shè)計背景顏色漸變的網(wǎng)頁，要實現(xiàn)這一點，需要使用CSS中的animation屬性來設(shè)置body元素的樣式。

CSS如何創(chuàng)建淡入背景動畫

例子

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

假設(shè)，你希望在五秒鐘內(nèi)將背景色從灰色轉(zhuǎn)換為橙色，并且是循環(huán)進行。

以下是如何在CSS中實現(xiàn)此功能：

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是無限循環(huán)。

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

@Keyframes 規(guī)則

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

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

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

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

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

@keyframes 規(guī)則的語法

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

相關(guān)文章

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