基础hover的简单交互

 上图使用的图标来源于阿里巴巴矢量库： https://www.iconfont.cn

 

Html：
<div class="icon_jz clear">
            <div class="icon">
                <div id="icon_text">
                    <p>FaceBook</p>
                </div>
                <span class="iconfont icon-facebook" style="font-size:50px;"></span>
            </div>
            <div class="icon">
                <div id="icon_text">
                    <p>Google+</p>
                </div>
                <span class="iconfont icon-guge" style="font-size:50px;"></span>
            </div>
            <div class="icon">
                <div id="icon_text">
                    <p>Linkedin</p>
                </div>
                <span class="iconfont icon-lingying" style="font-size: 50px"></span>
            </div>
            <div class="icon">
                <div id="icon_text">
                    <p>Twitter</p>
                </div>
                <span class="iconfont icon-tuite" style="font-size: 50px"></span>
            </div>
            <div class="icon">
                <div id="icon_text">
                    <p>Github</p>
                </div>
                <span class="iconfont icon-git" style="font-size: 50px"></span>
            </div>
            <div class="icon">
                <div id="icon_text">
                    <p>Codepen</p>
                </div>
                <span class="iconfont icon-codepen" style="font-size: 50px"></span>
            </div>
            <div class="icon">
                <div id="icon_text">
                    <p>Feed</p>
                </div>
                <span class="iconfont icon-feed" style="font-size: 50px"></span>
            </div>
            <div class="icon">
                <div id="icon_text">
                    <p>Contactme</p>
                </div>
                <span class="iconfont icon-youxiang" style="font-size: 50px"></span>
            </div>
</div>

多个icon使用float浮动属性，并排放置。

单独写一个clear用于清楚父元素塌陷的问题 :

css:

1 .clear:after {
2    content:""; 
3    display: block; 
4    clear:both; 
5 }

将icon装在div中，div绘制圆：

css:

.icon{
    width: 100px;
    height: 100px;
    background: #666666;   //背景灰色
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    transition: all .5s linear;  //实现渐进效果
}

 Icon和文字已经容器的排放：

css:

<div class="icon">
          <div id="icon_text">
              <p>Contactme</p>
          </div>
      <span class="iconfont icon-youxiang" style="font-size: 50px"></span>
</div>

隐藏文字，鼠标移入时显示，同时改变div背景颜色：

css:

.icon:hover{
      background-color: #415E9B;
   }
#icon_text{
    position: relative;
    top: -45px;
    opacity: 0;
    transition: all .5s linear;
}
#icon_text p{
    font-size: 20px;
    color: #666666;
}
.icon:hover #icon_text {
    opacity: 1;
}