垂直滑動CSS背景圖像

Question

背景圖像垂直滾動，讓人感覺它比視口大。 我嘗試使用CSS而沒有運氣。

HTML

<div class="out">
    <div class="inner">hello</div>
</div>

CSS

@keyframes scrollBgGridLinks {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-330px);
    }
}
.inner {
    animation: 35s linear 0s normal forwards 1 scrollBgGridLinks;
    background-color: red;
    position: absolute;
    clip:rect(0px, 50px, 50px, 0px);
    width:200px;
}
.out {
    height:200px;
}

Answer 1

偽元素滑動背景

位於<body>一個或兩個背景偽元素position: fixed以高度和寬度百分比position: fixed 。

要在背景上方顯示元素，請使用：

element-to-show-above {
    position: relative;
    z-index: 1;
}

對於包含大量內容的頁面，將上述屬性應用於包含所有元素的包裝器是有意義的。

兩個例子

“顯示代碼段”並運行它以查看演示。

＃1 - 一個緩慢過渡到頂部並暫停

一個偽元素高度是視口高度和寬度的200％
背景滑動到-50％並使用forwards選項暫停

注意： Safari目前需要 -webkit-前綴用於transform屬性。

 body { margin: 0; } body:before { content: ''; display: block; -webkit-animation: 80s bg linear forwards; animation: 80s bg linear forwards; background: url(http://i.stack.imgur.com/zawJr.jpg) no-repeat; background-size: 100% 100%; position: fixed; height: 300%; width: 200%; top: 0; left: 0; } @-webkit-keyframes bg { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @keyframes bg { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-50%); transform: translateY(-50%); } }

＃2 - 永無止境的背景幻燈片

第一個從0開始，滑到-100％。
第二個以100％開始並滑動到0。

它們一起形成一個恆定的運動錯覺，不需要額外的HTML！

 body { margin: 0; } body:before { content: ''; display: block; -webkit-animation: 5s bg linear infinite; animation: 5s bg linear infinite; background: url(http://i.stack.imgur.com/zawJr.jpg) no-repeat; background-size: 100% 100%; position: fixed; height: 100%; width: 100%; top: 0; left: 0; } body:after { content: ''; display: block; -webkit-animation: 5s bg2 linear infinite; animation: 5s bg2 linear infinite; background: url(http://i.stack.imgur.com/zawJr.jpg) no-repeat; background-size: 100% 100%; position: fixed; height: 100%; width: 100%; top: 0; left: 0; } @-webkit-keyframes bg { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes bg2 { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes bg { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes bg2 { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } }

垂直滑動CSS背景圖像

問題描述

1 個解決方案

解決方案1
4 已采納 2014-10-17 16:41:38

偽元素滑動背景

兩個例子

＃1 - 一個緩慢過渡到頂部並暫停

＃2 - 永無止境的背景幻燈片

垂直滑動CSS背景圖像

問題描述

1 個解決方案

解決方案1 4 已采納 2014-10-17 16:41:38

偽元素滑動背景

兩個例子

＃1 - 一個緩慢過渡到頂部並暫停

＃2 - 永無止境的背景幻燈片

解決方案1
4 已采納 2014-10-17 16:41:38