我想在網頁中添加更多交互式元素。如何製作背景圖像緩慢放大和縮小
我之前在某些網站上看到的是,背景圖像放大速度緩慢並退出。所以它看起來更像是一種生物。
我一直在互聯網上搜索和這裏。但我不知道這種技術是如何完成的,我不知道這種效果的名稱。
我也認爲這應該是相當容易實現這個與一些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>
的目標是讓背景圖像縮放慢慢退了出去。就像它在呼吸。
它可以通過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