CSS3標誌動畫？

我需要動畫一個標誌，有這個鏈接的示例（http://www.minmedia.nl/footer）CSS3標誌動畫？

我的問題是：只有「網頁設計的」部分和標誌兩色的藥片部分應該是可見的在動畫的開始。當你徘徊在它上面，藥丸應該移動到左邊，「網頁設計」部分現在應該淡出。此外，當徽標的「藥丸」部分向左滑動時，徽標的最後部分應該變爲可見並向左滑動。所以最後的顯示將是完整的標誌。當您再次移動鼠標時，它應該反轉，再次顯示「網頁設計」文本和「藥丸」部分。

我對HTML和CSS有一個基本的理解，但是我對CSS3動畫/轉換沒有任何經驗。

如果有人能夠幫助我，那會很好，或者如果你碰巧知道一個網頁的鏈接，可以幫助我，這也是偉大的。

來源

2015-04-07 sietze

你需要用所有的組件在一個容器中，並設置該包裝懸停效果。滑動項目最好通過轉換transformX（）屬性來完成。褪色應該通過更改不透明度值 –

請在這裏包括我們的標記... – jbutler483

以下是您如何使用關鍵幀的示例。

你將需要玩的時間來適應您的需要，以及爲-moz-前綴，但最初的工作是爲你做的。通過使用包裝器，可以很容易地爲你的元素設置隱藏的溢出，儘管嚴格來說，你可以不使用，但它又取決於你的情況。

我也假設你的圖像是80px * 80px，但是這個可以調整。

.wrap { 
 
    width: 200px; 
 
    position: relative; 
 
    height: 80px; 
 
    vertical-align: middle; 
 
    overflow:hidden; 
 
} 
 
.wrap img { 
 
    height: 80px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: calc(100% - 80px); 
 
    -webkit-animation: 3s picMove forwards; 
 
    animation: 3s picMove forwards; 
 
} 
 
.wrap div { 
 
    display: inline-block; 
 
    position: absolute; 
 
    height: 80px; 
 
    line-height: 80px; 
 
    top: 0; 
 
} 
 
.firstText { 
 
    left: 0; 
 
    -webkit-animation: 3s fade forwards; 
 
    animation: 3s fade forwards; 
 
    opacity: 0; 
 
} 
 
.secondText { 
 
    left: 100%; 
 
    -webkit-animation: 3s movefade forwards; 
 
    animation: 3s movefade forwards; 
 
} 
 
@-webkit-keyframes fade { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@keyframes fade { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@keyframes movefade { 
 
    0% { 
 
    opacity: 0; 
 
    left: 100%; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    left: 80px; 
 
    } 
 
} 
 
@-webkit-keyframes movefade { 
 
    0% { 
 
    opacity: 0; 
 
    left: 100%; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    left: 80px; 
 
    } 
 
} 
 
@-webkit-keyframes picMove { 
 
    0% { 
 
    left: calc(100% - 80px); 
 
    } 
 
    100% { 
 
    left: 0; 
 
    } 
 
} 
 
@keyframes picMove { 
 
    0% { 
 
    left: calc(100% - 80px); 
 
    } 
 
    100% { 
 
    left: 0; 
 
    } 
 
}

<div class="wrap"> 
 
    <div class="firstText">First</div> 
 
    <img src="http://placekitten.com/g/300/300" /> 
 
    <div class="secondText">Second</div> 
 
</div>

來源

2015-04-07 12:32:26 jbutler483

CSS3標誌動畫？

回答

相關問題