提供zblog模板_zblog主题_wordpress模板的下载和定制

一个纯html+css的下拉导航动画效果

天兴工作室 2019-01-24 13:21 网页特效 4905 0 评论


这是天兴工作室自己折腾的一个纯html+css写的下拉导航动画,代码如下。

html部分:

<div class="nav">
    <ul class="clearfix">
        <li><a href="#">自定义</a></li>
        <li><a href="#">自定义</a></li>
        <li>
            <a href="#">自定义</a>
            <ul>
                <li><a href="#">自定义</a></li>
                <li><a href="#">自定义</a></li>
                <li><a href="#">自定义自定义</a></li>
            </ul>
        </li>
        <li><a href="#">自定义</a></li>
        <li>
            <a href="#">自定义</a>
            <ul>
                <li><a href="#">自定义</a></li>
                <li><a href="#">自定义</a></li>
                <li><a href="#">自定义自定义</a></li>
            </ul>
        </li>
        <li><a href="#">自定义</a></li>
        <li><a href="#">自定义</a></li>
    </ul>
</div>

css部分:

.nav{background-color:#404553;}
.nav li{position:relative;float:left;}
.nav li a{display:block;line-height:40px;padding:0 20px;color:#fff;}
.nav li ul{position:absolute;left:-20px;top:60px;background-color:#404553;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s;z-index: 0;opacity: 0;visibility: hidden}
.nav li ul li a{white-space: nowrap;line-height:30px;}
.nav li:hover ul{top:40px;padding:6px 0;opacity:1;visibility:visible;}

动画效果大概是鼠标放上去之后,从下往上慢慢提起来。比较重要是属性是“visibility”,才发现visibility可以这么用...


欢迎 发表评论: 取消回复

请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合
  • 登 录
  • 注册账号 忘记密码?
  • 注 册
  • 已有账号?直接登录 忘记密码?
  • 社交账号登录