一个导航栏带简单动画效果

最新推荐文章于 2024-02-04 22:53:14 发布
最新推荐文章于 2024-02-04 22:53:14 发布
阅读量1.4k 收藏 5
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xkdamowang/article/details/52713603
版权

前端学习中+_+

这里写图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>二级页面</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            font-size:12px;
        }
        .nav{
            margin:10px auto;
            width:486px;
            background-color: #d3d3d3;
            border-radius: 5px;
        }
        .nav>ul>li{
            float:left;
            position:relative;
        }
        .nav>ul{
            list-style-type: none;
            border-radius: 5px;
        }
        a{
            text-decoration: none;
            color:#86777d;
            font-family:"Microsoft YaHei";
        }
        .nav>ul>li>a{
            display:inline-block;
            height:38px;
            line-height: 38px;
            background-color: #d3d3d3;
            padding-right:16px;
            padding-left:16px;
            border-left:1px solid #eeeeee;
        }
        .nav ul li ul li a{
            display:inline-block;
            width:233px;
            height:40px;
            line-height:40px;
            padding-left:16px;
            border-top:1px solid #eeeeee;
            -webkit-transition: all 0.4s linear;
        }
        .nav ul li ul{
            display:none;
            background-color: #d3d3d3;
            border-radius: 5px;
            list-style-type: none;
            position:absolute;
            top:38px;
            left:0;
        }
        .nav>ul>li:hover ul{
            display:block;
            position:absolute;
            -webkit-animation: mymove 0.3s linear forwards;
        }
        @-webkit-keyframes mymove {
            from{
                left:0;
                top:43px;
            }
            to{
                left:0;
                top:38px;
            }
         }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">Home</a>
                <ul>
                    <li><a href="#">Web Designing</a></li>
                    <li><a href="#">Motion Graphics</a></li>
                    <li><a href="#">Web Development(PHP,Python)</a></li>
                    <li><a href="#">Photography</a></li>
                    </ul>
            </li>
            <li><a href="#">About Us</a>
                <ul>
                    <li><a href="#">Web Designing</a></li>
                    <li><a href="#">Motion Graphics</a></li>
                    <li><a href="#">Web Development(PHP,Python)</a></li>
                    <li><a href="#">Photography</a></li>
                </ul>
            </li>
            <li><a href="#">Services</a>
                <ul>
                    <li><a href="#">Web Designing</a></li>
                    <li><a href="#">Motion Graphics</a></li>
                    <li><a href="#">Web Development(PHP,Python)</a></li>
                    <li><a href="#">Photography</a></li>
                </ul>
            </li>
            <li><a href="#">Portfolio</a>
                <ul>
                    <li><a href="#">Web Designing</a></li>
                    <li><a href="#">Motion Graphics</a></li>
                    <li><a href="#">Web Development(PHP,Python)</a></li>
                    <li><a href="#">Photography</a></li>
                </ul>
            </li>
            <li><a href="#">Talk to us</a>
                <ul>
                    <li><a href="#">Web Designing</a></li>
                    <li><a href="#">Motion Graphics</a></li>
                    <li><a href="#">Web Development(PHP,Python)</a></li>
                    <li><a href="#">Photography</a></li>
                </ul>
            </li>
            </ul>
    </div>
</body>
</html>
xkdamowang
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 SVG超炫环状导航菜单动画特效
12-13
wheelnav是一款效果非常炫酷的HTML5 SVG环状导航菜单动画特效js插件。该环状导航菜单插件基于Raphael.js，可以制作各种带动画特效的饼状菜单、环形菜单和径向菜单等等。
Web前端开发-简单导航栏实例
05-17
关于HTML中的导航栏的设计(夏季风格)~可以出现鼠标悬停效果变化~用div框起来，使用ul标签包含a。
前端小案例——动态导航栏文字（HTML + CSS, 附源码）
最新发布
前端小白一枚
02-04 2415
这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景，并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素，包含一个文本和一个横向的下划线。当鼠标悬停在选项上时，选项的文本颜色会变为粉红色，并且下划线会从中间向两边展开，呈现出一种动态的效果。这种导航栏可以用于网页或应用程序中，提供简洁且有吸引力的导航选项。
仿QQ空间底部导航栏动画效果
01-27
2015年最新企业级，仿QQ空间底部导航栏动画效果
导航栏动画特效（dom实现）
qq_41335337的博客
09-30 1058
想用纯dom搞一个简单的导航栏特效，本以为一个小时就能搞好，哎对dom理解不够深，一直搞了一下午。。。。。。 html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;ti
网站导航栏如何实现动态效果
燚轩软件科技
07-23 5644
　　导航栏是每一个网站都要有的，那么对于一般的导航栏制作，相信大家都会，而且也不会遇到什么麻烦，但是如何才能让网站导航栏实现动态效果估计这会难倒很多技术人员，那么下面就来为大家分析解答一下。 Html代码： &lt;html&gt; &lt;head&gt; &lt;title&gt;导航演示&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt..
纯CSS3下拉菜单导航 子菜单多种展开动画
08-23
这是一款非常漂亮的纯CSS3下拉菜单导航，这款菜单有两大亮点，一个是唯美的全屏背景图，非常适合个性化的个人博客使用。另外一个特点是子菜单拥有多种展开动画方式，有简单的淡入淡出，也有炫酷的折叠式展开。并且这款菜单时纯CSS实现，使用起来相当方便。
vue导航栏下拉菜单（附带展开收缩动画）
小多的博客
08-19 5019
先看效果： 下拉动画 方法一：鼠标移入移出事件 使用的是vue的 组件以及鼠标事件 和 优点：缺点：案例代码 方法二：hover 将下拉菜单需要下拉的导航栏下一级下，使用 控制元素，不要设置相对定位，以免定位时下拉菜单宽度不能100%铺满导航栏宽度。 将菜单初始高度设为0 优点：缺点：案例代码.........
Android状态栏&导航栏使用总结(重要)
火星男孩的分享空间
07-07 1563
1.通过View # setSystemUiVisibility改变状态栏或者导航栏状态后，当我们离开对应Activity时，这些改变会丢失，因此当我们重新回到此Activity时，我们应该在onResume 或者 onWindowFocusChanged中重新设置需要的状态。
CSS之导航栏
Fancymeng的博客
09-01 1641
今天接着谈谈CSS CSS除了简单的文字背景样式外，还有着多样的格式本篇文章笔者将谈一谈导航栏 今天这篇会涉及HTML和VUE哦~ ~ ~
CSS — 导航栏篇（一）
热门推荐
畅谈、
01-04 1万+
CSS 和 HTML 综合应用之导航栏。让你初步了解导航栏的组成和写法
5个不同样式bootstrap导航菜单模板
11-13
bootstrap,导航,菜单,HTML5,模板.
unigui菜单动画导航栏
11-12
unigui菜单动画导航栏调用jquery animate动画
用 TabLayout 实现底部、顶部导航栏
05-08
用 TabLayout 实现底部、顶部导航栏，你绝对需要掌握的
各种导航栏
01-25
原生态仿导航栏，各种导航栏，滑动或者按钮切换都可以
html导航菜单栏
06-08
风格朴素漂亮的html模板 黑色的水平导航菜单 菜单项弹出显示
CSS3鼠标经过导航菜单动画效果代码
06-05
CSS3制作的一款简单鼠标经过导航菜单动画效果代码，三种菜单栏效果分别是：前后旋转，上浮，左右旋转。
带有css3动画效果的兼容多浏览器简单导航条示例
09-25
用原生JS写了一个简单的导航，下拉菜单加了一点CSS3动画效果，兼容IE6-10、FIREFOX、CHROME、OPERA、SAFARI等主流浏览器
纯CSS实现菜单、导航栏的3D翻转动画效果
09-25
随着浏览器技术的进步，CSS动画技术已经不是只那些简单的淡入淡出效果或幻灯片效果，它们能做很多更强大的事情
写一个侧边导航栏+滑动电梯效果
04-01
这里是一个简单的侧边导航栏滑动电梯效果的示例： HTML代码： ``` <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值