背景
在做网站的时候，大都会有一个悬窗，用来展示联系方式，默认展示几个图标，鼠标划上的时候显示相应的联系方式，如下图：
页面悬窗效果图
思路
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;），鼠标划上的时候再重置一下，这样就会有好看的动画效果了；
