网站中的菜单转换 CSS

Question

我已经开始使用模板 http://irontemplates.com/wp-demos/lush-classical/ I recently saw the site http://beeshoney.jp/culture/。我想这样实现菜单转换。我是网页设计的初学者。请帮助我理解这个概念并完成它。请。

在我的模板中：他们使用了 right 属性，而在我看到的模板中，他们使用了 translate 属性

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>

网站中的菜单转换 CSS

Menu transition in websites CSS

html

css

transition