純CSS3發(fā)光分享按鈕的實(shí)現(xiàn)教程

2024-07-11 08:30:35

字體：大中小

供稿：網(wǎng)友

今天我們要利用CSS3來完成一款很酷的發(fā)光分享按鈕，并將整理的源代碼分享給大家，如果需要，你也可以將此CSS3分享按鈕應(yīng)用到自己的項(xiàng)目中去，也歡迎將此文分享給你的好友。下面先來看一看效果圖

下面我們來分析一下實(shí)現(xiàn)的過程以及核心的源碼，代碼主要由HTML和CSS組成，應(yīng)該說比較簡單。
HTML代碼：

復(fù)制代碼

代碼如下:
<div>
<div>
<ul>
<li><a href="#"><i></i></a></li>
<li><a href="#"><i></i></a></li>
<li><a href="#"><i></i></a></li>
<li><a href="#"><i></i></a></li>
<li><a href="#"><i></i></a></li>
</ul>
</div>
</div>

以上的HTML結(jié)構(gòu)利用了一個ul列表將5個分享按鈕橫向排列起來，結(jié)構(gòu)非常清晰。
CSS代碼：
首先我們需要將ul中的項(xiàng)橫向排列，這就需要實(shí)現(xiàn)以下的CSS代碼：

復(fù)制代碼

代碼如下:
ul {
list-style: none;
float: left;
}
ul li {
position: relative;
width: 100px; height: 100px;
float: left;
background: #474644;
border-radius: 15px;
border-bottom: 5px solid #33322f;
border-left: 3px solid #000000;
box-shadow: -3px 5px 10px 3px rgba(51, 50, 47, 0.5), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, 0px 2px 1px rgba(0, 0, 0, .7);
-webkit-transition: -webkit-box-shadow .15s ease-in-out;
}

然后是實(shí)現(xiàn)分享按鈕中的圖標(biāo)，這里我們引用了一個外部的字體庫font-awesome.css，這個CSS文件中定義了很多圖標(biāo)字體，所以我們只需在頁面上引用這個文件就可以了。
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
在這個CSS文件中我們可以看出，如果要添加facebook的圖標(biāo)，只要這樣寫就可以了：

復(fù)制代碼

代碼如下:
.fa-facebook:before {
content: "/f09a";
}

最后我們要實(shí)現(xiàn)的是鼠標(biāo)滑過的發(fā)光效果，其實(shí)說白了，就是改變文字的投影和內(nèi)部圖標(biāo)顏色漸變動畫，漸變動畫如下代碼所示：

復(fù)制代碼

代碼如下:
ul li:hover i{
-webkit-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
ul li:active{
border-bottom: 1px solid #33322f;
top: 5px;
border-left: 1px solid #000000;
margin-right: 2px;
box-shadow: -2px 4px 7px 1px rgba(51, 50, 47, 0.7), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, -1px 2px 1px rgba(0, 0, 0, .7);
z-index: -1;
}

上一篇：讓IE6支持最小高度min-height、最大高度max-height的方法

下一篇：css樣式表中中文名字體亂碼使用Unicode可解決

發(fā)表評論

共有條評論