媒體圖標(biāo)與提示懸停效果-渣圖.gif
<a >查看demo</a>
<link rel="stylesheet" >
在文檔中插入了這一行代碼儿普，目的是從Font Awesome插入矢量圖標(biāo)荚孵，見網(wǎng)址：http://fontawesome.dashgame.com/#basic
<html>結(jié)構(gòu)
<link rel="stylesheet" >
<body>
<div>
<a href="#" class="icon facebook"><i class="fa fa-facebook fa-lg"></i><span>facebook</span></a>
<a href="#" class="icon twitter"><i class="fa fa-twitter fa-lg"></i><span>twitter</span></a>
<a href="#" class="icon dribble"><i class="fa fa-dribbble fa-lg"></i><span>dribble</span></a>
<a href="#" class="icon pinterest"><i class="fa fa-pinterest fa-lg"></i><span>pinterest</span></a>
</div>
</body>
<i class="fa fa-facebook fa-lg"> 指的是font-awesome中Facebook圖標(biāo)的寫法，“前綴 fa 啊奄，再加上圖標(biāo)名稱渐苏。使用 fa-lg (33%遞增)、fa-2x菇夸、 fa-3x琼富、fa-4x，或者 fa-5x 類 來放大圖標(biāo)峻仇」冢”
WX20170525-163003@2x.png
<CSS>樣式
body {
text-align: center;
margin: 0 ;
padding-top: 80px;
background: #eee;
}
a {
background: #D2D7D3;
text-decoration: none;
position: relative;
display: inline-block;
position: relative;
width: 40px;
height: 28px; /*--高度28+上內(nèi)邊距12=40，成正方形--*/
margin: 0 2px;
border-radius: 50%;
padding-top: 12px; ／*--讓 icon 居中--*／
-webkit-transition: all .5s ease; ／*--圖標(biāo)過渡效果--*／
transition: all .5s ease;
}
／*--改變 icon 的顏色--*／
a i {
color: #fff;
}
a span {
padding: 5px 7px;;
background: #fff;
color: #000;
font-size: 14px;
font-weight: bold;
position: absolute;
left:-25px;
right: -25px;
bottom: 0; ／*--文字初始位置--*／
opacity: 0; ／*--文字不可見（全透明）--*／
-webkit-transition: all .4s ease; ／*--文字過渡效果--*／
transition: all .4s ease;
}
／*--三角圖標(biāo)--*／
a span::before {
content: '';
width: 0;
height: 0;
border-top: 5px solid #fff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
left: 40px;
bottom: -5px;
}
a:hover span {
position: absolute;
bottom: 50px; ／*--hover狀態(tài)下文字位置向上移動--*／
opacity: 1; ／*--hover狀態(tài)下文字現(xiàn)身～--*／
}
上面這一段設(shè)置了文字的過渡效果摄咆。
-----下面這一段是icon的顏色過渡凡蚜。
a.facebook:hover {
background: #4183d7;
}
a.facebook span {
color: #4183d7;
}
a.twitter:hover {
background-color: #19b5fe;
}
a.twitter span {
color: #19b5fe;
}
a.dribble:hover{
background-color: #f62459;
color: #fff;
}
a.dribble span{
color: #f62459;
}
a.pinterest:hover{
background-color: #f22613;
color: #fff;
}
a.pinterest span{
color: #f22613;
}
[參考來源] http://thecodeplayer.com/walkthrough/social-media-icons-tooltip-hover-effect
--在這里icon有另一種寫法:
a.icon:before{
font-family: "FontAwesome", sans-serif;
color: #fff;
font-size: 20px;
}
a.facebook:before{
content: '\f09a';
}
a.twitter:before{
content: '\f099';
}
a.github:before{
content: '\f113';
}
a.dribble:before{
content: '\f17d';
}
a.pinterest:before{
content: '\f0d2';
}
Ps.我沒搞懂啊 ~_^
