如何製作背景圖像緩慢放大和縮小

我之前在某些網站上看到的是，背景圖像放大速度緩慢並退出。所以它看起來更像是一種生物。

我一直在互聯網上搜索和這裏。但我不知道這種技術是如何完成的，我不知道這種效果的名稱。

我也認爲這應該是相當容易實現這個與一些CSS3和HTML5。

的問題是：

是否有一個名字爲這個效果，什麼叫？
可以用純CSS完成嗎？
在線樣本是否有基本的可用樣本？

下面是HTML我腦子裏想的：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Test page</title> 
     <style> 
      body { 
       background-image: url("http://wallpapercave.com/wp/LXR5gFx.png"); 
       background-size: 100% auto; 
      } 
     </style> 
    </head> 

    <body> 

    </body> 
</html>

的目標是讓背景圖像縮放慢慢退了出去。就像它在呼吸。

來源

2016-01-24 Thomas Croonen

它可以通過Css.Use開發者工具在瀏覽器中輕鬆完成的鏈接codepen。提示：瞭解：懸停在CSS中。 – Raghu

我有點熟悉：懸停。但背景應該始終保持移動。即使沒有涉及鼠標活動 –

您可以使用'background-size'屬性來實現動畫，如回答中所示，但不建議使用，因爲背景大小是可視屬性，因此任何更改都會導致重繪，這將影響性能。更好的方法是像這個答案一樣使用'transform' - http://stackoverflow.com/questions/34311417/css-animations-animation-is-slow-and-jiggles/34312019#34312019（second snippet）。我認爲這個答案中的動畫也非常接近你想要的。 – Harry

主要有兩種不同的方法，使用animation或transition。

animation當人們想要一直在運行的東西時，通常會更好，而transition對於例如懸停的影響。

這裏是一個開始使用animation。

棧片斷

html, body { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 

 
@keyframes breath { 
 
    0% { background-size: 100% auto; } 
 
    50% { background-size: 140% auto; } 
 
    100% { background-size: 100% auto; } 
 
} 
 

 
#bkg{ 
 
    width: 100%; 
 
    height: 100%; 
 
    animation: breath 4s linear infinite; 
 
    background: url("http://wallpapercave.com/wp/LXR5gFx.png") center center no-repeat; 
 
}

<div id="bkg"></div>

來源

2016-01-24 14:11:27 LGSon

非常感謝！這節省了很多時間！它就像一個魅力！所以我尋找的CSS被稱爲。動畫：呼吸： :) –

不客氣，你可以將它命名爲你想要的方式:) – LGSon

你在找什麼叫關鍵幀。

這是以下示例中的代碼。

@keyframes zoom { 
0% { transform:scale(1,1); } 
50% { transform:scale(1.2,1.2); } 
100% { 
    transform:scale(1,1); 
} 
}

的CSS變換具有可以BR運行「逐幀」，在上述特性，我們希望該圖片以通過在x和y軸的因子1.2的時候進行縮放動畫的50％已經通過。我們從無變焦開始，放大20％，然後回到原始狀態。

這裏是我們如何添加到類：

animation: zoom 30s infinite;

只是添加到您的類，它會運行。有更多的參數，但對於不熟悉的人來說，這會變得複雜，因此，這是一個簡單的例子。

在這裏，在行動

http://codepen.io/damianocel/pen/QyqRgw

來源

2016-01-24 16:00:58

我不知道是否可以發佈鏈接到教程，我認爲只是在wc3或mdn上查找它是不是很初學者友好。 –

如何製作背景圖像緩慢放大和縮小

回答

相關問題