注册 登录 天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制

天兴工作室-网页特效

天兴工作室网页特效栏目会收集各类简单容易入手的js特效、jQuery特效、css特效、网页特效等各种效果。

当前位置:网站首页 教程 网页特效 正文

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

天兴工作室 2019-01-24 网页特效 243 ℃ 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可以这么用...

赞 (1)

这么好的文章居然暂无评论!来一个吧...

欢迎 发表评论

服务项目

快速入口

常见问题

天兴工作室 | www.txcstx.cn

天兴工作室介绍天兴工作室承接:网站建设、zblog模板和dedecms模板定制、仿站(像素级仿站)、html单页面定制和修改、网站模板修改等服务;我们的办事准则:要么不答应、答应则一定做到

  • 交流群:ZBLOG交流群
  • 客户群:天兴工作室客户群
在线QQ 评论文章