css小案例:导航栏特效

css小案例:导航栏特效,实现如下图所示效果;

首先可以将html代码写出:

1 <nav class="cl-effect-1">
2     <a href="#">Umbrella</a>
3     <a href="#">Ineffable</a>
4     <a href="#">Lilt</a>
5     <a href="#">Mellifluous</a>
6     <a href="#">Serendipity</a>
7 </nav>

css部分:

 1 nav{
 2         text-align: center;
 3 }
 4 nav a {
 5         position: relative;
 6         display: inline-block;
 7         margin: 15px 25px;
 8         outline: none;
 9         color: #fff;
10         text-decoration: none;
11         text-transform: uppercase;
12         letter-spacing: 1px;
13         font-weight: 400;
14         text-shadow: 0 0 1px rgba(255,255,255,0.3);
15         font-size: 1.35em;
16 }
17
18 nav a:hover,
19 nav a:focus {
20         outline: none;
21 }
22 .cl-effect-1 a {
23         margin: 0 10px;
24             padding: 10px 20px;
25 }
26
27 .cl-effect-1 a::before {
28         position: absolute;
29         top: 0;
30         left: 0;
31         width: 100%;
32         height: 2px;
33         background: #fff;
34         content: ‘‘;
35         -webkit-transition: top 0.3s;
36         -moz-transition: top 0.3s;
37         transition: top 0.3s;
38 }
39
40 .cl-effect-1 a::after {
41         position: absolute;
42         top: 0;
43         left: 0;
44         width: 2px;
45         height: 2px;
46         background: #fff;
47         content: ‘‘;
48         -webkit-transition: height 0.3s;
49         -moz-transition: height 0.3s;
50         transition: height 0.3s;
51 }
52
53 .cl-effect-1 a:hover::before {
54         top: 100%;
55         opacity: 1;
56 }
57
58 .cl-effect-1 a:hover::after {
59         height: 100%;
60 }                       

代码很简单,下面就其中的要素重点来解析。

一、可以看出我们所写的html部分文字内容为小写,而显示效果为全大写,这里有一个css属性:text-transform   定义文本的大小写状态,此属性对中文无意义。

    取值:capitalize | uppercase | lowercase | none | inherit


none


默认。定义带有小写字母和大写字母的标准的文本。


capitalize


文本中的每个单词以大写字母开头。


uppercase


定义仅有大写字母。


lowercase


定义无大写字母,仅有小写字母。


inherit


规定应该从父元素继承 text-transform 属性的值。

所以这里通过css部分写入text-transform: uppercase;来实现。

二、伪元素

  1、 基本语法

  在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性:

Html代码 

1 p:before  {}  

  不过,在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后,建议按照标准双写。过于老的浏览器可能会存在支持问题,不过伪元素大多是配合 CSS3 使用,就无所谓向下兼容了:

Html代码 

1 img::after {}  

  这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会出现在 DOM 中,不可复制,仅仅是在 CSS 渲染层加入。比较有用的是以下几个值:

· [String] - 使用引号包括一段字符串,将会向元素内容中添加字符串。示例:

Html代码 

1 a:after { content: ""; }  

· attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例:

Html代码 

1 a:after { content:"(" attr(href) ")"; } 

· url() / uri() – 用于引用媒体文件。示例:

Html代码 

1 h1::before { content: url(logo.png); }  

· counter() –  调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例:

Html代码 

1 h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

  2、进阶技巧

  清除浮动是一个时常会遇到的问题,不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在,无需增加没有意义的元素,仅需要以下样式即可在元素尾部自动清除浮动:

Html代码

1 .clear-fix { *overflow: hidden; *zoom: 1; }
2
3 .clear-fix:after { display: table; content: ""; width: 0; clear: both; }  

  许多人喜欢给 blockquote 引用段添加巨大的引号作为背景,这种时候我们就可以用 :before 来代替 background 了,即可以给背景留下空间,还可以直接使用文字而非图片:

Html代码 

 1  blockquote::before {
 2
 3  content: open-quote;
 4
 5  position: absolute;
 6
 7  z-index: -1;
 8
 9  color: #DDD;
10
11  font-size: 120px;
12
13  font-family: serif;
14
15  font-weight: bolder;
16
17  }  

 

  用 :before 和 :after 伪类结合更多 CSS3 强大的特性,还可以完成非常多有意思的特效和 Hack。

取值:capitalize | uppercase | lowercase | none | inherit

时间: 2024-10-17 19:16:46

css小案例:导航栏特效的相关文章

【源码分享】jquery+css实现侧边导航栏

jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2css代码 这里是css代码,详情请看注释 1 <style>

淘宝分类导航条;纯css实现固定导航栏

效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

用CSS制作简单导航栏

纯css实现的简单导航栏. 前端开发基础中的基础.. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航栏练习-01</title> <style type="text/css"> /* ul与div样式 */ #nav ul{ list-style-type: none; display: inl

Css常用操作——————导航栏

一.垂直导航栏 ul{     list-style-type: none;     margin: 0px;     padding: 0px; } a:link,a:visited{     text-decoration: none;     display: block;     background-color: aqua;     color: black;     width: 50px;     text-align: center; } a:active,a:hover{   

使用CSS设计网站导航栏

body #nav li a { width:auto; } #nav li a:hover { background-color:#ffcc00; color:#fff; border-right:10px solid #ff00ff; border-left:10px solid #ff00ff; } #navh li{ float:left;} #navh ul { list-style:none; margin:0; padding:0; border:none; } #navh li

天书笔记:HTML+CSS实现顶部导航栏

此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记 先晒效果图: 效果要求类似于b站的顶部导航(..原谅我老是拿b站做例子:) ) 然后是代码 下面逐条分析这一堆东西 HTML部分主要是这个: 1 <div class="topbar"> 2 <div class="topbody"> 3 <a class="title" href=""&

纯CSS实现nav导航栏+jQuery实现article区DIV切换

效果图: main.html 代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>MyHomepage</title> 5 <meta charset="utf-8" /> 6 <link type="text/css" rel="stylesheet" href="css/reset.css" />

导航栏特效-新闻类APP(比网易,今日头条好看)

好久没有写文章了,慢慢的自己工作中遇到的问题不做积累,下次遇到还会忘.哎.... 周日无聊的单身程序员-唯有程序你懂的... 写着程序听着歌也是极好的!! 最近工作中要实现类似 今日头条等新闻类APP顶部导航条的效果 ,不过我们这效果切换时要加上文字颜色的渐变和缩放 我不会弄动态图片啊,求各位会的教俺下: 一:分析 今天我们要实现这种特效. 用到的开源项目有:master-nineoldandroids-library.jar这个jar包,这个是向下兼容的jar包,包括android一系列的动画

jquery-仿flash的一个导航栏特效

演示地址:http://itxiaoming.sinaapp.com/demo05/demo.html Html代码   <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>demo01</title> <link rel="stylesheet" type=