来自codepen http://codepen.io/mouradhamoud/pen/RRvVZp

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        body { background-color: #444; }

        .menu { background-color: #FF8800; list-style: none; padding: 0px; margin: 0 auto; width: 100%; text-align: center; }

            .menu li { display: inline-block; }

                .menu li a { color: transparent; padding: 10px 20px; margin: 0px; display: inline-block; font-family: 'Lato', sans-serif; font-size: 18px; text-decoration: none; text-transform: uppercase; background-color: #FF8800; position: relative; overflow: hidden; }

                    .menu li a::before { content: attr(data-title); display: block; padding: 10px 20px; position: absolute; top: 0%; left: 0px; color: #FFF; transition: all 0.5s; }

                    .menu li a::after { content: attr(data-title); display: block; padding: 10px 20px; position: absolute; top: 100%; left: 0px; color: #FFF; font-weight: bold; font-size: 19px; transition: all 0.5s; }

                    .menu li a:hover::before { top: -100%; }

                    .menu li a:hover::after { top: 0%; }

    </style>

</head>

<body>

    <ul class="menu">

        <li><a href="#" data-title="Home">Home</a></li>

        <li><a href="#" data-title="Features">Features</a></li>

        <li><a href="#" data-title="Pricing">Pricing</a></li>

        <li><a href="#" data-title="Contact">Contact</a></li>

    </ul>

</body>

</html>

CSS3导航效果的更多相关文章

  1. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  2. 基于 jQuery 实现的精致作品集图片导航效果

    今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...

  3. 我收集到的最好的jQuery和CSS3导航菜单

    jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...

  4. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  5. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  6. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  7. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  8. Cool！15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  9. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

随机推荐

  1. Java中为什么main()中不能创建内部类对象？

    对main方法而言,虽然写在类中,它是游离于任何类之外的,因此某类的非静态内部类对它而言是不直接可见的,也就无法直接访问 . 1:非静态内部类,必须有一个外部类的引用才能创建. 2:在外部类的非静态方 ...

  2. 【BZOJ-4591】超能粒子炮·改 数论 + 组合数 + Lucas定理

    4591: [Shoi2015]超能粒子炮·改 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 95  Solved: 33[Submit][Statu ...

  3. 【BZOJ-2839】集合计数 容斥原理 + 线性推逆元 + 排列组合

    2839: 集合计数 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 229  Solved: 120[Submit][Status][Discuss] ...

  4. ASM ClassReader failed to parse class file - probably due to a new Java class file version that isn't supported yet

    严重: Context initialization failedorg.springframework.beans.factory.BeanDefinitionStoreException: Fai ...

  5. java 基础拾漏

    1.java语言支持的类型非为两类:基础类型(primitive Type) 和引用类型(Reference Type),基础类型8种 2.数组元素的类型是基本类型中的整数类型(byte,short, ...

  6. SSD硬盘的4K对齐

    4K对应4096 硬盘模式: 一.让SSD运行在AHCI模式下: AHCI,全称Advanced Host Controller Interface,即高级主机控制器接口,相比老旧的“IDE“ 虚拟模 ...

  7. bc#29 做题笔记

    昨天的bc被坑惨了= = 本来能涨rating的大好机会又浪费了...大号已弃号 A:第一反应是高精度,结果模板找不到了= =,然后现学现卖拍了个java的BigInteger+快速幂,调了好半天不说 ...

  8. POJ3154 Graveyard

    Graveyard Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 1654   Accepted: 840   Specia ...

  9. 过滤器(Filter)的应用

    过滤器的概念 Java中的Filter 并不是一个标准的Servlet ,它不能处理用户请求,也不能对客户端生成响应. 主要用于对HttpServletRequest 进行预处理,也可以对HttpSe ...

  10. Linux DHCP通过OPTION43为H3C的AP下发AC地址

    对于DHCP服务,可以在很多平台上进行设置.那么这里我们就主要讲解一下在Linux DHCP服务器上通过option 43实现H3C的AP自动联系AC注册的相关内容.原来的DHCP Server是放在 ...