Question

HTML：

<div id="menu" class="menu">
        <ul class="headlines">
            <li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
            <li id="item2"><button onclick="myFunction2()">A </button></li>
            <li id="item3">B      </li>
            <li id="item4">C      </li>
            <li id="item5">D      </li>
            <li id="item6">E      </li>
            <li id="item7">F      </li>
        </ul>
        </div>

CSS：

lu, li{
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 150px;
    text-align: right;    
    border-style: none;
}

.menu{

    width:150px;
    height: 350px;
    margin:0 auto;

}



.menu li{  
position: relative;
  top:150px;
  bottom: 0;
  right: 0;
  margin: auto; 
  border-style:none;  
}

//动画

#item7{
  transition: opacity .8s, left .8s ease-out;
  -moz-transition: opacity .8s, left .8s ease-out;
  -webkit-transition: opacity .8s, left .8s ease-out;
  -o-transition: opacity .8s, left .8s ease-out;
}
#item6{
  transition: opacity 1s, left 1s ease-out;
  -moz-transition: opacity 1s, left 1s ease-out;
  -webkit-transition: opacity 1s, left 1s ease-out;
  -o-transition: opacity 1s, left 1s ease-out;
}
#item5{
  transition: opacity 1.2s, left 1.2s ease-out;
  -moz-transition: opacity 1.2s, left 1.2s ease-out;
  -webkit-transition: opacity 1.2s, left 1.2s ease-out;
  -o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4{
  transition: opacity 1.4s, left 1.4s ease-out;
  -moz-transition: opacity 1.4s, left 1.4s ease-out;
  -webkit-transition: opacity 1.4s, left 1.4s ease-out;
  -o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3{
  transition: opacity 1.6s, left 1.6s ease-out;
  -moz-transition: opacity 1.6s, left 1.6s ease-out;
  -webkit-transition: opacity 1.6s, left 1.6s ease-out;
  -o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2{
  transition: opacity 1.8s, left 1.8s ease-out;
  -moz-transition: opacity 1.8s, left 1.8s ease-out;
  -webkit-transition: opacity 1.8s, left 1.8s ease-out;
  -o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1{
  transition: opacity 2s, left 2s ease-out;
  -moz-transition: opacity 2s, left 2s ease-out;
  -webkit-transition: opacity 2s, left 2s ease-out;
  -o-transition: opacity 2s, left 2s ease-out;
}

我想动画这个位于我网站中间的菜单，以这个形式转到最左边/，它可以正常工作但是当我调整窗口大小时，菜单没有响应，它没有＆＃ 39; t保留在屏幕中间。有什么帮助吗？

Answer 1

我不知道我是否理解你的问题，

请查看这种风格，让我知道这满足您的需求。

lu, li{

       list-style-type: none;
       font-size: 1.5em;
       text-align: center;    
       border-style: none;
 }
.menu{
     width:150px;
     height: 350px;
     margin:0 auto;

}
.menu li{  
    position: relative;
    top:150px;
    margin: 0 auto; 
    border-style:none;  
   }

菜单在CSS中加扰

1 个答案: