css3制作炫酷导航栏效果

今天主要利用hover选择器。鼠标滑过查看效果。

一。普通导航栏

  • Home
  • Content
  • Service
  • Team
  • Contact

对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单。

(1)使用ul标签布局

(2)鼠标经过事件

<div id="demo1">
        <ul>
            <li>Home</li>
            <li>Content</li>
            <li>Service</li>
            <li>Team</li>
            <li>Contact</li>
        </ul>
    </div>
*{
    padding:0;
    margin:0;
    list-style:none;
    text-decoration:none;
}
a{
    color:#fff;
}
#demo1{
    width:600px;
}
#demo1 ul li{
    float:left;
    width:100px;
    height:50px;
    text-align:center;
    background:#ccc;
    line-height:50px;
    color:#FFF;
}
#demo1 ul li:hover{
    background:#999;
}

(二)括号类导航栏

  • Home
  • Content
  • Service
  • Team
  • Contact

对于导航栏的排版这里就不多说了,可以看到当鼠标经过的时候会从文字中出现括号,思路:

(1)当无鼠标经过事件时,括号其实是有的,只不多它处于隐形状态在文字中间

(2)当鼠标经过时,括号从中间移动到两边,并且从隐形变为显示。

 <div id="demo2">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Content</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
#demo2{
    width:600px;
    height:50px;
    margin:20px auto;
}
#demo2 ul li{
    position:relative;
    float:left;
    width:100px;
    height:50px;
    text-align:center;
    line-height:50px;
    background:#000;
}
#demo2 ul li a:before{
    content:"[";
    margin-right:10px;
    transform:translateX(20px);
    -webkit-transform:translateX(20px);
    -moz-transform:translateX(20px);
    -ms-transform:translateX(20px);

}
#demo2 ul li a:after{
    content:"]";
    margin-left:10px;
    transform:translateX(-20px);
    -webkit-transform:translateX(-20px);
    -moz-transform:translateX(-20px);
    -ms-transform:translateX(-20px);
}
#demo2 ul li a:before,#demo2 ul li a:after{
    display:inline-block;
    opacity:0;
    transition:transform 0.3s, opacity 0.2s;
    -moz-transition:transform 0.3s, opacity 0.2s;
    -webkit-transition:transform 0.3s, opacity 0.2s;
    -ms-transition:transform 0.3s, opacity 0.2s;
}
#demo2 ul li a:hover::before,#demo2 ul li a:hover::after,#demo2 ul li a:focus::before,#demo2 ul li a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

三。滑动导航栏

  • Home
  • Content
  • Service
  • Team
  • Contact

从演示效果来看要注意两点

(1)鼠标经过时有横向从上到下

(2)鼠标经过时文字从上到下并且变换颜色

这就和上一个例子很像了

(1)横线其实是存在的,只不过鼠标没有经过时是在文字上方且透明的,鼠标经过时横线由上到下。

(2)文字这里就要定义一个动画了,因为在鼠标经过时它体现了三种状态:

  ①文字从现位置划下

  ②文字从出现在上方

  ③文字从上方滑到现位置

 <div id="demo3">
        <ul>
            <li><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>Content</span></a></li>
            <li><a href="#"><span>Service</span></a></li>
            <li><a href="#"><span>Team</span></a></li>
            <li><a href="#"><span>Contact</span></a></li>
        </ul>
    </div>
#demo3 ul li{
    float:left;
    margin:0 25px;
    position:relative;
}
#demo3 ul li a{
    color:#D8761E;
    font-family:‘Righteous‘, cursive;
    display:block;
    padding:10px 0;
}
#demo3 ul li span{
    display:block;
}
#demo3 ul li a:before{
    content:"";
    position:absolute;
    width:100%;
    height:3px;
    background:#D8761E;
    bottom:0;
    opacity:0;
    -webkit-transform: translate3d(0, -40px, 0);
    transform: translate3d(0, -40px, 0);
    -webkit-transition: -webkit-transform 0s 0.3s, opacity 0.2s;
    transition: transform 0s 0.3s, opacity 0.2s;
}
#demo3 ul li a:hover::before{
    opacity:1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.1s;
    transition: transform 0.5s, opacity 0.1s;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#demo3 ul li a:hover span{
    color:#510301;
    -webkit-animation: anim-francisco 0.3s forwards;
    animation: anim-francisco 0.3s forwards;
}
@-webkit-keyframes anim-francisco {
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes anim-francisco {
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

这里注意的是不能给标签设置宽高,因为一旦设置宽高会影响文字滑动路线,变得很夸张。这里加span也是这个原因,鼠标经过a时让span以a为参照进行滑动。

里面的标签就不解释了,自己查效果会更好哦。

我好无奈呀,用这个显示效果a标签和li的默认样式竟然不能取消,谁能告诉我为什么/(ㄒoㄒ)/~~  不过自己编译的话在浏览器里是正常的

时间: 2024-10-07 11:47:27

css3制作炫酷导航栏效果的相关文章

css3制作炫酷导航栏效果 &lt;转&gt;

今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单. (1)使用ul标签布局 (2)鼠标经过事件 <div id="demo1"> <ul> <li>Home</li> <li>Content</li> <li>Service</li> &l

CSS+JQ实现炫酷导航栏

一步一步的学习,后面再做个综合页面 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏一</title> </head> <body> <header class="header&qu

制作炫酷的专题页面

很多时候,我们需要一些炫酷的动画效果,让页面更加吸引用户的眼球,现有比较好用的JS动画库有:velocity和GSAP(支持falsh和js).今天这里主要学习的是velocity配合css3动画,快速打造属于你的专题页面. PS:发现各种炫酷的效果都是由这些简单的动作通过组合实现的,发现最终效果和动画的设计者有很大关系,鄙人就属于那种不怎么懂设计的人,这里只是抛砖引玉. 虽然我今天不准备详细介绍GSAP这个动画库,但是还有有必要把相关资源的入口放在这里,供想要了解的 同学进行深入的 学习. 特

Android实现炫酷SVG动画效果

svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器(如火狐浏览器)来观看.使用svg格式可让你设计激动人心的.高分辨率的Web图形页面. svg格式具备目前网络流行的jpg和png等格式无法具备的优势:可以任意放大图形显示,但绝不会以牺牲图像质量为代价;可在svg图像中保留可编辑和可搜寻的状态;平均来讲,s

css制作最简单导航栏

css制作最简单导航栏 (1)先建一个列表: <ol> <li><a href="#">网易</a></li> <li><a href="#">搜狐</a></li> <li><a href="#">新浪</a></li> <li><a href="#"&

CSS3制作凤凰网导航

CSS3制作凤凰网导航,所使用的技术并不复杂,你了解了:box-shadow,CSS制作图形,旋转,动画,这样制作这个效果就不会有压力. <!DOCTYPE html> <html lang="en-US"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="

PagerSlidingTabStrip实现网易新闻导航栏效果

PagerSlidingTabStrip实现网易新闻导航栏效果之前在项目当中有一个需求,实现类似网易新闻标题导航的效果,于是在在github搜索下,找了一个开源PagerSlidingTabStrip,研究了这个空间的使用和一些方法,在此与大家分享,希望能够帮到有需要的朋友,好了废话不多讲,直接上代码. package com.example.textpagerslidingtabstrip.activity; import com.example.textpagerslidingtabstri

一个炫酷的Actionbar效果

今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示大图片,如果用户滚动页面需要查看内容的时候,则大图收缩到 ActionBar 中. 源码下载:http://files.cnblogs.com/sage-blog/notboringactionbar.zip 参考:http://flavienlaurent.com/blog/2013/11/20/

php实现三级导航栏效果

首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array( 'three_tit' => '企业荣誉', 'three_cont' => array(