来自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. Yii2美化confirm

    在view中, <?= Html::a('删除', ['post/delete', 'id' => $post['id']],['data-confirm'=>'确定要删除吗?']) ...

  2. C++强制类型转换操作符 dynamic_cast

    dynamic_cast是四个强制类型转换操作符中最特殊的一个,它支持运行时识别指针或引用. >>>>>>>>>>>编译器的RTTI设 ...

  3. Windows Server 2012及以上安装IIS的步骤

    已经和2008安装时有着明显区别,如题的安装步骤如下: 这里需要注意的是,选择了[Web 服务器(IIS)支持]后可能会弹出选择的界面,到时也一起全选,这里由于是已经安装了,所以没弹出. 说明:上面根 ...

  4. 虚拟机软件bochs编译使用问题

    bochs是一款具有调试功能的虚拟机软件,由C++编写,可用于调试操作系统.从ubuntu软件源中下载的很可能没有调试功能,需要先下载源码,可能比编译之后的可执行文件大的多. 编译时有很多选项,可以通 ...

  5. jdbc/ojdbc连oracle的三种方式(转)

    文章转自:http://blog.itpub.net/22664653/viewspace-1383092/ 前言  本文是一篇学习笔记,学习如何通过java jdbc /ojdbc 连接oracle ...

  6. C# winform窗体设计-通过条件查询数据

    在winform 数据库设计中,有时候需要通过条件查询对应的数据,并且将数据显示在文本框(or 富文本框)中,下面,小编将讲述通过一个条件: 首先,我们需要对数据库建立连接,并且执行数据库命令,在此之 ...

  7. PHP中的一个”坑“

    说一个极有可能在工作中遇到的问题——foreach的引用 foreach $arr = range(1,3); //[1,2,3] foreach($arr as &$val) { } for ...

  8. Code笔记之：CSS+HTML display 属性

    display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...

  9. java语言：Linux与JVM的内存关系分

    在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用大约800m.从表面上,物理内存应该 ...

  10. Ubuntu学习总结-08 Ubuntu运行Shell脚本报 shell /bin/bash^M: bad interpreter错误问题解决

    错误原因之一很有可能是运行的脚本文件是DOS格式的, 即每一行的行尾以\r\n来标识, 其ASCII码分别是0x0D, 0x0A.可以有很多种办法看这个文件是DOS格式的还是UNIX格式的, 还是MA ...