十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營(yíng)維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
本篇內(nèi)容介紹了“怎么用CSS3實(shí)現(xiàn)會(huì)發(fā)光的按鈕”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
今天我們要利用CSS3來完成一款很酷的發(fā)光分享按鈕,并將整理的源代碼分享給大家,如果需要,你也可以將此CSS3分享按鈕應(yīng)用到自己的項(xiàng)目中去,也歡迎將此文分享給你的好友。下面先來看一看效果圖
下面我們來分析一下實(shí)現(xiàn)的過程以及核心的源碼,代碼主要由HTML和CSS組成,應(yīng)該說比較簡(jiǎn)單。
HTML代碼:
代碼如下:
以上的HTML結(jié)構(gòu)利用了一個(gè)ul列表將5個(gè)分享按鈕橫向排列起來,結(jié)構(gòu)非常清晰。
CSS代碼:
首先我們需要將ul中的項(xiàng)橫向排列,這就需要實(shí)現(xiàn)以下的CSS代碼:
代碼如下:
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),這里我們引用了一個(gè)外部的字體庫(kù)font-awesome.css,這個(gè)CSS文件中定義了很多圖標(biāo)字體,所以我們只需在頁(yè)面上引用這個(gè)文件就可以了。
在這個(gè)CSS文件中我們可以看出,如果要添加facebook的圖標(biāo),只要這樣寫就可以了:
代碼如下:
.fa-facebook:before {
content: "\f09a";
}
最后我們要實(shí)現(xiàn)的是鼠標(biāo)滑過的發(fā)光效果,其實(shí)說白了,就是改變文字的投影和內(nèi)部圖標(biāo)顏色漸變動(dòng)畫,漸變動(dòng)畫如下代碼所示:
代碼如下:
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;
}
文字投影效果:
代碼如下:
.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實(shí)現(xiàn)會(huì)發(fā)光的按鈕”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!