css小案例:導航欄特效

css小案例:導航欄特效，實現如下圖所示效果；

 

 

 

首先可以將html代碼寫出：

<nav class="cl-effect-1">
    <a href="#">Umbrella</a>
    <a href="#">Ineffable</a>
    <a href="#">Lilt</a>
    <a href="#">Mellifluous</a>
    <a href="#">Serendipity</a>
</nav>

css部分：

nav{
        text-align: center;
}
nav a {
        position: relative;
        display: inline-block;
        margin: 15px 25px;
        outline: none;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 400;
        text-shadow: 0 0 1px rgba(255,255,255,0.3);
        font-size: 1.35em;
}
            
nav a:hover,
nav a:focus {
        outline: none;
}
.cl-effect-1 a {
        margin: 0 10px;
            padding: 10px 20px;
}
            
.cl-effect-1 a::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #fff;
        content: '';
        -webkit-transition: top 0.3s;
        -moz-transition: top 0.3s;
        transition: top 0.3s;
}
            
.cl-effect-1 a::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 2px;
        background: #fff;
        content: '';
        -webkit-transition: height 0.3s;
        -moz-transition: height 0.3s;
        transition: height 0.3s;
}
            
.cl-effect-1 a:hover::before {
        top: 100%;
        opacity: 1;
}
            
.cl-effect-1 a:hover::after {
        height: 100%;
}                       

 

代碼很簡單，下面就其中的要素重點來解析。

一、可以看出我們所寫的html部分文字內容為小寫，而顯示效果為全大寫，這里有一個css屬性：text-transform   定義文本的大小寫狀態,此屬性對中文無意義。

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

none	默認。定義帶有小寫字母和大寫字母的標准的文本。
capitalize	文本中的每個單詞以大寫字母開頭。
uppercase	定義僅有大寫字母。
lowercase	定義無大寫字母，僅有小寫字母。
inherit	規定應該從父元素繼承 text-transform 屬性的值。

所以這里通過css部分寫入text-transform: uppercase;來實現。

二、偽元素

　　1、 基本語法

　　在了解進階的應用之前，先來了解一下語法規則。平常僅僅需要將這兩個偽元素用於添加一些自定義字符時，只需使用偽類使用的單冒號寫法，以保證瀏覽器的兼容性：

Html代碼 

p:before  {}  

　　不過，在 CSS3 中為了區別偽元素和偽類為偽元素使用了雙冒號，因此如果使用了 display 或者 width 等屬性時使得顯示脫離了原本元素后，建議按照標准雙寫。過於老的瀏覽器可能會存在支持問題，不過偽元素大多是配合 CSS3 使用，就無所謂向下兼容了：

Html代碼 

img::after {}  

　　這兩個偽類下特有的屬性 content ，用於在 CSS 渲染中向元素邏輯上的頭部或尾部添加內容。注意這些添加不會改變文檔內容，不會出現在 DOM 中，不可復制，僅僅是在 CSS 渲染層加入。比較有用的是以下幾個值：

·  [String] - 使用引號包括一段字符串，將會向元素內容中添加字符串。示例：

Html代碼 

a:after { content: "↗"; }  

·  attr() – 調用當前元素的屬性，可以方便的比如將圖片的 Alt 提示文字或者鏈接的 Href 地址顯示出來。示例：

Html代碼 

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

·  url() / uri() – 用於引用媒體文件。示例：

Html代碼 

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

·  counter() –  調用計數器，可以不使用列表元素實現序號功能。具體請參見 counter-increment 和 counter-reset 屬性的用法。示例：

Html代碼 

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

　　2、進階技巧

　　清除浮動是一個時常會遇到的問題，不少人的解決辦法是添加一個空的 div 應用 clear:both; 屬性。現在，無需增加沒有意義的元素，僅需要以下樣式即可在元素尾部自動清除浮動：

Html代碼

.clear-fix { *overflow: hidden; *zoom: 1; }  

.clear-fix:after { display: table; content: ""; width: 0; clear: both; }  

　　許多人喜歡給 blockquote 引用段添加巨大的引號作為背景，這種時候我們就可以用 :before 來代替 background 了，即可以給背景留下空間，還可以直接使用文字而非圖片：

Html代碼 

 blockquote::before {  

 content: open-quote;  

 position: absolute;  

 z-index: -1;  

 color: #DDD;  

 font-size: 120px;  

 font-family: serif;  

 font-weight: bolder;  

 }  

 

　　用 :before 和 :after 偽類結合更多 CSS3 強大的特性，還可以完成非常多有意思的特效和 Hack。

 

 

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