CSS 媒体图标与提示悬停效果

媒体图标与提示悬停效果-渣图.gif

查看demo

在文档中插入了这一行代码，目的是从Font Awesome插入矢量图标，见网址：http://fontawesome.dashgame.com/#basic

结构

   

    

        facebook
        twitter
        dribble
        pinterest
    

指的是font-awesome中Facebook图标的写法，“前缀 fa ，再加上图标名称。使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。”

[email protected]

样式

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.我没搞懂啊 ~_^