媒体图标与提示悬停效果-渣图.gif
<a href='https://codepen.io/lip90/pen/Lyazww/'>查看demo</a>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
在文档中插入了这一行代码，目的是从Font Awesome插入矢量图标，见网址：http://fontawesome.dashgame.com/#basic
<html>结构
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<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图标的写法，“前缀 fa ，再加上图标名称。使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。”
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+上内边距12=40，成正方形--*/
margin: 0 2px;
border-radius: 50%;
padding-top: 12px; ／*--让 icon 居中--*／
-webkit-transition: all .5s ease; ／*--图标过渡效果--*／
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;
}
／*--三角图标--*／
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状态下文字位置向上移动--*／
opacity: 1; ／*--hover状态下文字现身～--*／
}
上面这一段设置了文字的过渡效果。
-----下面这一段是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.我没搞懂啊 ~_^
