什么都分享
以及,记录自己的故事
正在载入当前位置天气信息……

音阶式滑动菜单-CSS菜单设计代码下载(自设计7)

范例

菜单1
菜单2
菜单3
菜单4
菜单5
菜单6
菜单7

使用CSS构图并控制动画效果。


代码区

css

<style type="text/css">
.ex_div{
cursor:pointer;
display:table;
width:100px;
height:30px;
background:#E8E8E8;
border-radius:5px;
border:1px solid #FFFFFF;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
-o-transition:0.4s;
text-align:center;
}
.ex_div:hover{
width:200px;
color:#FFFFFF;
background-color:#ff8c00;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
-o-transition:0.4s;
}
</style>

html

<div class="ex_div">菜单1</div>
<div class="ex_div">菜单2</div>
<div class="ex_div">菜单3</div>
<div class="ex_div">菜单4</div>
<div class="ex_div">菜单5</div>
<div class="ex_div">菜单6</div>
<div class="ex_div">菜单7</div>
打赏
本文遵守创作共享 BY-NC-ND 4.0协议,转载前请先联系作者。绯末博客 » 音阶式滑动菜单-CSS菜单设计代码下载(自设计7)
分享到: 更多 (0)

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏