純CSS3發(fā)光分享按鈕的實現(xiàn)教程
發(fā)布時間：2014-09-06 15:01:42 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了利用純CSS3實現(xiàn)的點擊發(fā)光按鈕特效,供大家一起共同分享學習，本篇文章有完整的源代碼分享給大家，需要的朋友可以參考下
今天我們要利用CSS3來完成一款很酷的發(fā)光分享按鈕，并將整理的源代碼分享給大家，如果需要，你也可以將此CSS3分享按鈕應(yīng)用到自己的項目中去，也歡迎將此文分享給你的好友。下面先來看一看效果圖
下面我們來分析一下實現(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à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;
}
然后是實現(xiàn)分享按鈕中的圖標，這里我們引用了一個外部的字體庫font-awesome.css，這個CSS文件中定義了很多圖標字體，所以我們只需在頁面上引用這個文件就可以了。
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
在這個CSS文件中我們可以看出，如果要添加facebook的圖標，只要這樣寫就可以了：
復(fù)制代碼
代碼如下:.fa-facebook:before {
content: "\f09a";
}
最后我們要實現(xiàn)的是鼠標滑過的發(fā)光效果，其實說白了，就是改變文字的投影和內(nèi)部圖標顏色漸變動畫，漸變動畫如下代碼所示：
復(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;
}
文字投影效果：
復(fù)制代碼
代碼如下:.facebook:hover i{
text-shadow:
0px 0px #394C89, 0px 1px #32447A, -1px 2px #2C3B6A, -2px 3px #26335B, 0px 6px 5px rgba(51, 50, 47, 0.8),
0 0 1em #3f5598;
color: #3f5598;
}
以上就是用CSS3制作發(fā)光分享按鈕的所有的實現(xiàn)過程，希望能幫到大家，謝謝
相關(guān)文章
- 這篇文章主要介紹了CSS3中的字體及相關(guān)屬性，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2025-06-12
- 本文詳細解析了CSS3中實現(xiàn)賬號密碼輸入框提示特效的原理和方法，包括HTML5的placeholder屬性與CSS3新特性如偽類選擇器、動態(tài)效果和過渡動畫的結(jié)合使用，感興趣的朋友跟隨小2025-05-14
- CSS3的布局特性為前端開發(fā)者提供了無限可能，無論是Flexbox的一維布局還是Grid的二維布局，它們都能夠幫助開發(fā)者以更清晰、簡潔的方式實現(xiàn)復(fù)雜的網(wǎng)頁布局，本文給大家介紹C2025-05-14
CSS3 Facebook-style Buttons 項目常見問題及最新解決方案
CSS3 Facebook-style Buttons 是一個開源項目，旨在通過簡單的 CSS 代碼來重現(xiàn) Facebook 按鈕和工具欄的外觀，本文給大家介紹CSS3 Facebook-style Buttons 項目常見問題及2025-05-14使用animation.css庫快速實現(xiàn)CSS3旋轉(zhuǎn)動畫效果
隨著Web技術(shù)的不斷發(fā)展，動畫效果已經(jīng)成為了網(wǎng)頁設(shè)計中不可或缺的一部分，本文將深入探討animation.css的工作原理，如何使用以及其在實際項目中的應(yīng)用,感興趣的朋友一起看2025-05-14
CSS3 最強二維布局系統(tǒng)之Grid 網(wǎng)格布局
CS3的Grid網(wǎng)格布局是目前最強的二維布局系統(tǒng),可以同時對列和行進行處理,將網(wǎng)頁劃分成一個個網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局，本文介紹CSS3 最強二維布局系2025-02-27- 本文介紹了如何使用CSS3的transform屬性和動畫技巧實現(xiàn)波浪式圖片墻,通過設(shè)置圖片的垂直偏移量,并使用動畫使其周期性地改變位置,可以創(chuàng)建出動態(tài)且具有波浪效果的圖片墻,同2025-02-27
CSS3模擬實現(xiàn)一個雷達探測掃描動畫特效(最新推薦)
文章介紹了如何使用CSS3實現(xiàn)一個雷達探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動效果、尾巴陰影以及被掃描到的光點,通過HTML和CSS的配合,實現(xiàn)了豐富的動畫效果,2025-02-21- CSS3的Flexbox是一種強大的布局模式,通過設(shè)置display:flex可以輕松實現(xiàn)對齊、排列和分布網(wǎng)頁元素,它解決了傳統(tǒng)布局方法中的對齊、間距分配和自適應(yīng)布局等問題,接下來通過本2025-02-19
css3 實現(xiàn)icon刷新轉(zhuǎn)動效果
本文給大家介紹css3 實現(xiàn)icon刷新轉(zhuǎn)動效果，文章開頭給大家介紹了webkit-transform、animation、@keyframes這三個屬性，結(jié)合實例代碼給大家介紹的非常詳細，感興趣的朋友一2025-02-19
