CSS3 - 過渡效果幻燈片背景位置

Question

我有一個過渡效果，可以在幻燈片上向下/向上滑動。當然這很有道理，但我希望它能像邊框一樣慢慢地淡入/淡出。

這裏是我的代碼：

body { 
 
    background-color: rgb(6, 7, 11); 
 
} 
 
.bar-logout { 
 
    float: left; 
 
    background: rgb(7, 8, 13); 
 
    width: auto; 
 
    height: 40px; 
 
    border-bottom: 1px solid rgb(112, 101, 58); 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -ms-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span { 
 
    float: right; 
 
    padding: 6px 10px 6px 10px; 
 
} 
 
.bar-logout span span.logout { 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    color: rgb(164, 157, 139); 
 
    padding-top: 9px; 
 
    text-shadow: 0px 2px 3px rgb(0, 0, 0); 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -ms-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span span.logout .logout-icon { 
 
    float: left;position:relative;bottom:2px;background-image:url('http://i.imgur.com/eCXybOC.png');background-repeat:no-repeat;background-position:0 -16px;margin:0 8px 0 0;width:16px;height:16px;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; } 
 
    .bar-logout: hover { 
 
    border-bottom: 1px solid rgb(200, 180, 85); 
 
    } 
 
    .bar-logout:hover > span span.logout .logout-icon { 
 
    background-position: 0 0; 
 
    }

<div class="bar-logout"> 
 
    <span> 
 
    <span class="logout"><div class="logout-icon"></div>LOGOUT</span> 
 
    </span> 
 
</div>

Answer 1

當背景圖像是精靈的一部分時，我不認爲使用單個元素可以實現淡入/淡出效果（即您嘗試創建的效果）。這是因爲精靈將始終需要滑動移動。爲了使滑動運動不可見並且消失，我們需要不止一個狀態改變 - （1）淡出當前圖像（opacity: 0），（2）將background-position改變到正確位置（3）淡入圖片（opacity: 1）。由於它不僅需要改變不透明度，而且在一個元素上進行轉換時無法實現。 （注：雖然可以使用動畫來完成）。

當我們使用2個元素（其中一個是僞元素）時，我們可以達到您正在尋找的效果。我不太清楚你所尋找的效果是什麼類型（因爲邊界的變化不完全是淡入/淡出，它只是一種顏色變化），所以我給了兩個具有兩種不同效果的樣本。您可以選擇這兩種效果中的任何一種都適合您的需求。

效果類似於一個在邊框底部：（即圖標看起來是改變顏色）

這是通過在黃色圖標上添加一個灰色的圖標進行（使用僞元素），然後在懸停時將其opacity更改爲0。不透明度變化意味着懸停打開時底部的黃色圖標進入視圖。

body { 
 
    background-color: rgb(6, 7, 11); 
 
} 
 
.bar-logout { 
 
    float: left; 
 
    background: rgb(7, 8, 13); 
 
    width: auto; 
 
    height: 40px; 
 
    border-bottom: 1px solid rgb(112, 101, 58); 
 
    cursor: pointer; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span { 
 
    float: right; 
 
    padding: 6px 10px 6px 10px; 
 
} 
 
.bar-logout span span.logout { 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    color: rgb(164, 157, 139); 
 
    padding-top: 9px; 
 
    text-shadow: 0px 2px 3px rgb(0, 0, 0); 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span span.logout .logout-icon { 
 
    float: left; 
 
    position: relative; 
 
    bottom: 2px; 
 
    background-image: url('http://i.imgur.com/eCXybOC.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: 0 0px; 
 
    margin: 0 8px 0 0; 
 
    width: 16px; 
 
    height: 16px; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span span.logout .logout-icon:after { 
 
    position: absolute; 
 
    content: ''; 
 
    background-image: url('http://i.imgur.com/eCXybOC.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: 0 -16px; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all 0.5s ease-in-out; 
 
    z-index: 1; 
 
} 
 
.bar-logout:hover { 
 
    border-bottom: 1px solid rgb(200, 180, 85); 
 
} 
 
.bar-logout:hover > span span.logout .logout-icon:after { 
 
    opacity: 0; 
 
}

<div class="bar-logout"> 
 
    <span> 
 
<span class="logout"><div class="logout-icon"></div>LOGOUT</span> 
 
    </span> 
 
</div>

---

實際淡入/淡出效果：（即灰色圖標淡出，黃衰-在懸停和反之亦然）

這再次通過在黃色圖標頂部添加灰色圖標（使用僞元素）並懸停時，灰色圖標的opacity首先變爲0，然後在延遲之後，黃色圖標的opacity更改爲1（這是使用transition-delay等於transition-duration實現的）。

body { 
 
    background-color: rgb(6, 7, 11); 
 
} 
 
.bar-logout { 
 
    float: left; 
 
    background: rgb(7, 8, 13); 
 
    width: auto; 
 
    height: 40px; 
 
    border-bottom: 1px solid rgb(112, 101, 58); 
 
    cursor: pointer; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span { 
 
    float: right; 
 
    padding: 6px 10px 6px 10px; 
 
} 
 
.bar-logout span span.logout { 
 
    position: relative; 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    color: rgb(164, 157, 139); 
 
    padding-top: 9px; 
 
    text-shadow: 0px 2px 3px rgb(0, 0, 0); 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span span.logout .logout-icon { 
 
    float: left; 
 
    position: relative; 
 
    bottom: 2px; 
 
    background-image: url('http://i.imgur.com/eCXybOC.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: 0 0px; 
 
    margin: 0 8px 0 0; 
 
    width: 16px; 
 
    height: 16px; 
 
    opacity: 0; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout span span.logout:before { 
 
    float: left; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 10px; 
 
    bottom: 8px; 
 
    background-image: url('http://i.imgur.com/eCXybOC.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: 0 -16px; 
 
    margin: 0 8px 0 0; 
 
    width: 16px; 
 
    height: 16px; 
 
    transition: all 0.5s ease-in-out 0.5s; 
 
    z-index: 1; 
 
} 
 
.bar-logout:hover { 
 
    border-bottom: 1px solid rgb(200, 180, 85); 
 
} 
 
.bar-logout:hover > span span.logout:before { 
 
    opacity: 0; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.bar-logout:hover > span span.logout .logout-icon{ 
 
    opacity: 1; 
 
    transition: all 0.5s ease-in-out 0.5s; 
 
}

<div class="bar-logout"> 
 
    <span> 
 
    <span class="logout"><div class="logout-icon"></div>LOGOUT</span> 
 
    </span> 
 
</div>

Answer 2

編輯：基於您的評論

這裏是一個片段

body { background-color:rgb(6,7,11); } 
 
.bar-logout { float:left;background:rgb(7,8,13);width:auto;height:40px;border-bottom:1px solid rgb(112,101,58);cursor:pointer;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; } 
 
.bar-logout span { float:right;padding:6px 10px 6px 10px; } 
 
.bar-logout span span.logout { font-family:"Trebuchet MS",Helvetica,sans-serif;font-size:11px;font-weight:bold;color:rgb(164,157,139);padding-top:9px;text-shadow:0px 2px 3px rgb(0,0,0);-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; } 
 
.bar-logout span span.logout .logout-icon { float:left;position:relative;bottom:2px;background-image:url('http://i.imgur.com/eCXybOC.png');background-repeat:no-repeat;background-position:0 -16px;margin:0 8px 0 0;width:16px;height:16px;-webkit-transition:opacity 0.5s ease-in-out;-moz-transition:opacity 0.5s ease-in-out;-ms-transition:opacity 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;opacity:0; } 
 
.bar-logout:hover { border-bottom:1px solid rgb(200,180,85); } 
 
.bar-logout:hover > span span.logout .logout-icon { opacity:1 }

<div class="bar-logout"> 
 
<span> 
 
<span class="logout"><div class="logout-icon"></div>LOGOUT</span> 
 
</span> 
 
</div>