武汉web培训
达内武汉中心

15271940953

热门课程

武汉web培训:css3菜单滑动效果

  • 时间:2016-06-06
  • 发布:conglvse
  • 来源:web前端网

<ul >
    <li><a href="javascript: void(0);">Home</a></li>
    <li><a href="javascript: void(0);">About</a></li>
    <li><a href="javascript: void(0);">Category</a></li>
    <li><a href="javascript: void(0);">Blog</a></li>
    <li><a href="javascript: void(0);">Picture</a></li>
    <li class="bubble"></li>
</ul>

a{color:#555;text-decoration:none;}
a:hover{text-decoration:underline;}
ul{position: relative; list-style:none;margin:40px auto;width:900px;}
    li{float: left;margin: 10px;width: 80px;height: 25px;line-height: 25px;text-align: center;}
    li.bubble{background: rgba(255, 0, 0, 0.5);position: absolute;top: 0;left: 0;z-index: -1;-webkit-transition: left 0.5s;-moz-transition: left 0.5s;}
    li:nth-child(1):hover ~ .bubble{  left: 0px; }
    li:nth-child(2):hover ~ .bubble{  left: 100px; }
    li:nth-child(3):hover ~ .bubble{  left: 200px; }
    li:nth-child(4):hover ~ .bubble{  left: 300px; }
    li:nth-child(5):hover ~ .bubble{  left: 400px; }
上一篇:到底html标签为什么要语义化?
下一篇:javascript函数querySelector介绍

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

jquery的ajax和getJson跨域获取json数据

选择城市和中心
贵州省

广西省

海南省