[英]scrolling background in one direction only
我只想從下到上具有背景滾動效果,但是我不知道該怎么做。
我已經嘗試過使用CSS,但是這里出現的問題是它在兩個方向上滾動,即從下到上和從上到下。
* { margin: 0; padding: 0; } div { width: 100vw; height: 100vh; animation: change 2s infinite ease-in both; background-image: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg); background-size: cover; background-repeat: no-repeat; } @keyframes change { 0%, 100% { background-position: 0% 5%; } 5% { background-position: 0% 10% } 10% { background-position: 0% 15% } 15% { background-position: 0% 20% } 20% { background-position: 0% 25% } 25% { background-position: 0% 30%; } 30% { background-position: 0% 35% } 35% { background-position: 0% 40% } 40% { background-position: 0% 45% } 45% { background-position: 0% 50% } }
<div> <h1> This is animating background ...</h1> </div>
您可以通過使用關鍵幀更改的to
和from
屬性來實現。 效果有點怪異,因為背景的頂部和底部並不吻合...
* { margin: 0; padding: 0; } div { width: 100vw; height: 100vh; animation: change 3s linear infinite; background-image: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg); background-size: cover; background-repeat: repeat-y; background-position: 0 0; } @keyframes change { from { background-position: 0 100vh; } to { background-position: 0 0; } }
<div> <h1> This is animating background ...</h1> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.