網站中的菜單轉換CSS

Question

我已經開始在模板上炒作http://irontemplates.com/wp-demos/lush-classical/我最近看到該網站http://beeshoney.jp/culture/。我想實現這個菜單轉換。我是網頁設計的初學者。請幫助我理解這個概念並完成它。請。

在我的模板：他們使用正確的屬性，並在一個我看到他們已經使用翻譯財產

Answer 1

您可以使用動畫關鍵幀

*{box-sizing: border-box} 
 
:root{width: 100vw; height: 100vh} 
 
body{height: 100%} 
 
menu{ 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    background: #333; 
 
    height: 100%; 
 
    padding: 20px 0; 
 
    text-align: center 
 
} 
 
menu li{ 
 
    list-style: none; 
 
    color: white; 
 
    opacity: 0; 
 
    display: block; 
 
    text-align: left; 
 
    width: 100px; 
 
    margin: 10px auto; 
 
    transform: translateX(-100%) 
 
} 
 
menu li:first-child{ 
 
    -webkit-animation: translateIntro .3s .1s ease forwards 
 
} 
 
menu li:nth-child(2){ 
 
    -webkit-animation: translateIntro .3s .2s ease forwards 
 
} 
 
menu li:nth-child(3){ 
 
    -webkit-animation: translateIntro .3s .3s ease forwards 
 
} 
 
menu li:nth-child(4){ 
 
    -webkit-animation: translateIntro .3s .4s ease forwards 
 
} 
 
menu li:last-child{ 
 
    -webkit-animation: translateIntro .3s .5s ease forwards 
 
} 
 
@-webkit-keyframes translateIntro { 
 
    to{opacity: 1;transform: translateX(0%)} 
 
}

<menu> 
 
    <li>Home</li> 
 
    <li>Pricing</li> 
 
    <li>Work</li> 
 
    <li>Lab</li> 
 
    <li>Contact</li> 
 
</menu>