css3实现页面悬窗以及相应的动画效果

背景

在做网站的时候，大都会有一个悬窗，用来展示联系方式，默认展示几个图标，鼠标划上的时候显示相应的联系方式，如下图：

页面悬窗效果图

思路

1、页面布局，控制悬窗的显示位置；
2、书写默认的显示效果、鼠标划上的效果；

步骤

1、页面布局

<div class="contact-list">
      <span><b>123456</b><b>技术支持</b></span><br>
      <span><b>123456</b><b>技术支持</b></span>
    </div>

2、默认展示效果以及相应的动画效果，我直接把图标当成背景图片使用了，设置好背景图片的位置，然后添加动画效果，这部分我用less写的，所以把拆解写到注释里面啦；

.contact-list{
// 设置悬窗的展示位置
   position: fixed;
  top: 60%;
  right: 0%;
  z-index: 999;
  height: 110px;
  overflow: hidden;

// 设置两个按钮的通用样式
& > span{
    display: block;
    height: 55px;
    width: 50px;
    font-size: @font-14px;
    color: @color-fff;
    float: right;
    // 添加动画效果，鼠标划上的宽度变化动画
    .translation(width, 1s);


   //  鼠标划上的时候更改padding的值，展示文字部分
    &:hover{
      padding: 5px 15px 0 50px;
    }

  // 对第一个span标签的设置
    &:first-child{
      // 设置上左右为3px的圆角
      .border-radius-top(3px);
      // 设置背景图片
      background: url("../assets/images/pic/qq-black.png") #686868 no-repeat 12px center;
      
      // 设置鼠标划上的效果
      &:hover{
        // 第一个图标划上时设置上左右和下左为圆角，并切换背景图片，修改展示宽度
        .border-radius-left(3px);
        background: url("../assets/images/pic/qq-white.png") #686868 no-repeat 12px center;
        width: 170px;

        // 修改文字部分的padding
        & > b{
          padding-left: 0px;
        }
      }
    }

 // 对第一个span标签的设置
    &:last-child{
      // 设置下左右为3px的圆角
      .border-radius-bottom(3px);
       // 设置背景图片
      background: url("../assets/images/pic/wechat-black.png") #686868 no-repeat 12px center;

      // 设置鼠标划上的效果
      &:hover{

       // 第一个图标划上时设置上左和下左右为圆角，并切换背景图片，修改展示宽度
        .border-radius-right(3px);
        background: url("../assets/images/pic/wechat-white.png") #686868 no-repeat 12px center;
        width: 170px;
        
        // 修改文字部分的padding
        & > b{
          padding-left: 0px;
        }
      }
    }


    // 联系方式的通用样式
    & > b{
      display: block;
      font-weight: normal;
      // 这个地方的padding设置大一些，保证默认状态文字是显示不了的
      padding-left: 200px;
      // 修改padding-left时使用的动画效果
      .translation(padding-left, 1s);

      //  针对联系方式的两个部分，设置不同字体大小
      &:first-child{
        font-size: @font-16px;
      }
      &:last-child{
        font-size: @font-14px;
      }
    }
  }
}

3、动画效果使用的是translation，传入需要变化的属性和时间即可，其他的圆角是border-radius，需要的参数不同，设置的圆角尺寸不同即可，动画效果是单独写了一个less文件，需要的时候引入即可，非常方便，通用的样式我也是单独放在一个less文件里面。
下面是和上面配套的动画less：

.border-radius(@radius: 5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.border-radius-top(@radius: 5px){
  border-top-left-radius: @radius;
  border-top-right-radius: @radius;
  -moz-border-radius-topleft: @radius;
  -moz-border-radius-topright: @radius;
}
.border-radius-bottom(@radius: 5px){
  border-bottom-left-radius: @radius;
  border-bottom-right-radius: @radius;
  -moz-border-radius-bottomleft: @radius;
  -moz-border-radius-bottomright: @radius;
}
.border-radius-left(@radius: 5px){
  border-top-left-radius: @radius;
  border-bottom-left-radius: @radius;
  border-top-right-radius: @radius;
  -moz-border-radius-topleft: @radius;
  -moz-border-radius-bottomleft: @radius;
  -moz-border-radius-topright: @radius;
}
.border-radius-right(@radius: 5px){
  border-top-left-radius: @radius;
  border-bottom-left-radius: @radius;
  border-bottom-right-radius: @radius;
  -moz-border-radius-topleft: @radius;
  -moz-border-radius-bottomleft: @radius;
  -moz-border-radius-bottomright: @radius;
}
.translation(@props: width, @time: 1s){
  transition:@props @time;
  -moz-transition:@props @time; /* Firefox 4 */
  -webkit-transition:@props @time; /* Safari and Chrome */
  -o-transition:@props @time; /* Opera */
}
}

总结

1、按钮部分（这里就是span标签）一定一定要设置float:right，否则两个图标会一起伸缩，不能靠右固定；如果是悬窗再左边，就设置float:left，保证鼠标划上的时候两个按钮是不动的；
2、translation动画设置display属性是不生效的，所以这里用padding-left，让信息再可视区域之外（外层容器设置overflow: hidden;），鼠标划上的时候再重置一下，这样就会有好看的动画效果了；