純CSS實現(xiàn)右側(cè)底部懸浮效果(懸浮QQ、微信、微博、郵箱等聯(lián)系方式)

我們見過很多頁面右側(cè)浮動效果,最早有QQ聯(lián)系面板,對聯(lián)廣告等,大多數(shù)都是基于Javascript實現(xiàn)的動態(tài)效果,今天我給大家分享一個只需要CSS結(jié)合DIV實現(xiàn)的右側(cè)浮動效果。
源碼下載:點擊下載
HTML
我們希望懸浮效果最后加載,因此一般將其放置在頁面HTML的末尾,我們建立一個.side-bar,里面包含了QQ在線咨詢,微信(鼠標滑向彈出二維碼效果),微博,以及Email聯(lián)系方式等內(nèi)容,這些內(nèi)容我們都以<a>標簽包裹。
<div class="side-bar">
<a href="#" class="icon-qq">QQ在線咨詢</a>
<a href="#" class="icon-chat">微信<div class="chat-tips"><i></i>
<img style="width:138px;height:138px;" src="helloweba.jpg" alt="微信訂閱號"></div></a>
<a target="_blank" href="" class="icon-blog">微博</a>
<a href="http://www.dbjr.com.cn" class="icon-mail">mail</a>
</div>
CSS
我們使用CSS來完成浮動即鼠標滑向彈出效果。我們準備一張圖片right_bg.png,包含了幾個內(nèi)容的圖標,然后通過background-position各個圖標對應(yīng)的a內(nèi)容。我們使用position: fixed以及設(shè)置bottom和right值將.side-bar固定在右下角,這樣無論頁面如何滾動,.side-bar將一直在右下角位置不變。這里需要提下ie6下fixed效果需要單獨處理,但本文不做詳解,放棄ie6吧。
.side-bar a,.chat-tips i {background: url(right_bg.png) no-repeat;}
.side-bar {width: 66px;position: fixed;bottom: 20px;right: 25px;font-size: 0;line-height: 0;z-index: 100;}
.side-bar a {width: 66px;height: 66px;display: inline-block;background-color: #ddd;margin-bottom: 2px;}
.side-bar a:hover {background-color: #669fdd;}
.side-bar .icon-qq {background-position: 0 -62px;}
.side-bar .icon-chat {background-position: 0 -130px;position: relative;}
.side-bar .icon-blog {background-position: 0 -198px;}
.side-bar .icon-mail {background-position: 0 -266px;}
這里還有個鼠標滑向微信圖標的效果,當鼠標hover時,.chat-tips的display屬性設(shè)置為block,并且設(shè)置定位位置,一下代碼還包含了一個箭頭的CSS寫法:
.side-bar .icon-chat:hover .chat-tips {display: block;}
.chat-tips {padding: 20px;border: 1px solid #d1d2d6;position: absolute;right: 78px;top: -55px;background-color: #fff;display: none;}
.chat-tips i {width: 9px;height: 16px;display: inline-block;position: absolute;right: -9px;top: 80px;background-position:-88px -350px;}
.chat-tips img {width: 138px;height: 138px;}
簡單的幾行CSS代碼就完成了一個簡潔的右下角懸浮效果,快去試下吧。
相關(guān)文章
CSS3實現(xiàn)的上升懸浮的粒子閃爍發(fā)光動畫特效源碼
是一款基于animation,transform屬性制作發(fā)光懸浮的粒子上升動畫特效,無數(shù)粒子在上升的過程中不斷的閃爍發(fā)光,猶如螢火蟲在夜空中不停的飛舞,非常有意思2018-10-26純CSS3實現(xiàn)發(fā)光的懸浮熒光屏動畫效果源碼
這是一款基于純CSS3實現(xiàn)發(fā)光的懸浮熒光屏動畫效果源碼。畫面上懸浮顯示出一個發(fā)光的熒光屏,且熒光屏的屏幕面上還會隨著屏幕的運動而折射出不同的發(fā)光顯示動畫效果。熒光屏2018-06-12- 這篇文章主要介紹了css實現(xiàn)懸浮效果的陰影的方法示例的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-23
jQuery+CSS3實現(xiàn)的可拖拽懸浮彈性菜單特效源碼
是一款基于jQuery與css3屬性制作網(wǎng)頁懸浮的圓形彈性菜單,鼠標按住拖動可以將菜單到任意位置的效果代碼,同時,鼠標放在菜單上會出現(xiàn)高亮的效果,非常不錯,歡迎有需要此段2018-03-06css3實現(xiàn)的鼠標懸浮3D轉(zhuǎn)動二級下拉導(dǎo)航菜單動畫特效源碼
css3實現(xiàn)的鼠標懸浮3D轉(zhuǎn)動二級下拉導(dǎo)航菜單動畫特效源碼是一段實現(xiàn)了,將鼠標懸浮在導(dǎo)航欄上后,會3D轉(zhuǎn)動出二級下拉菜單導(dǎo)航動畫效果代碼,本段代碼適應(yīng)于所有網(wǎng)頁使用,有2017-04-14- css3實現(xiàn)的多種3d紙張鼠標懸浮特效源碼是一段實現(xiàn)了鼠標路過或懸浮在3D紙張選項上,相應(yīng)的3d紙張就會做出不同的特效,本段代碼適應(yīng)于所有網(wǎng)頁使用,有需要的朋友們可以前來2017-04-06
- 這篇文章運用實例代碼給大家介紹了利用CSS3如何實現(xiàn)按鈕鼠標懸浮光圈效果,有需要的朋友們可以參考學習,下面來一起看看吧。2016-09-11
CSS實現(xiàn)鼠標懸浮出現(xiàn)遮罩層示例源碼
這篇文章給大家分享了兩個鼠標懸浮出現(xiàn)說明遮罩層的效果,大家可以根據(jù)自己的需要選擇某一種效果,兩種效果文中都給出了實例代碼,下面來一起看看吧。2016-09-05- 本文給大家分享的基于css3實現(xiàn)右側(cè)懸浮在線客服源碼,幾乎是用css實現(xiàn)的,所以不支持低版本瀏覽器,需要的朋友可以參考下。2015-09-02
CSS3實現(xiàn)網(wǎng)頁右側(cè)懸浮固定二維碼掃描與在線客服等功能特效源碼
這是一款基于CSS3實現(xiàn)在網(wǎng)頁右側(cè)懸浮固定二維碼掃描與在線客服等功能的代碼,是一款非常優(yōu)秀的特效源碼2015-08-24