背景
在做網(wǎng)站的時(shí)候帮匾，大都會(huì)有一個(gè)懸窗，用來展示聯(lián)系方式痴鳄，默認(rèn)展示幾個(gè)圖標(biāo)瘟斜，鼠標(biāo)劃上的時(shí)候顯示相應(yīng)的聯(lián)系方式，如下圖：
思路
1痪寻、頁面布局螺句，控制懸窗的顯示位置；
2橡类、書寫默認(rèn)的顯示效果壹蔓、鼠標(biāo)劃上的效果；
步驟
1猫态、頁面布局
<div class="contact-list">
<span><b>123456</b><b>技術(shù)支持</b></span><br>
<span><b>123456</b><b>技術(shù)支持</b></span>
</div>
2、默認(rèn)展示效果以及相應(yīng)的動(dòng)畫效果，我直接把圖標(biāo)當(dāng)成背景圖片使用了亲雪，設(shè)置好背景圖片的位置勇凭，然后添加動(dòng)畫效果，這部分我用less寫的义辕，所以把拆解寫到注釋里面啦虾标；
.contact-list{
// 設(shè)置懸窗的展示位置
position: fixed;
top: 60%;
right: 0%;
z-index: 999;
height: 110px;
overflow: hidden;
// 設(shè)置兩個(gè)按鈕的通用樣式
& > span{
display: block;
height: 55px;
width: 50px;
font-size: @font-14px;
color: @color-fff;
float: right;
// 添加動(dòng)畫效果，鼠標(biāo)劃上的寬度變化動(dòng)畫
.translation(width, 1s);
// 鼠標(biāo)劃上的時(shí)候更改padding的值灌砖，展示文字部分
&:hover{
padding: 5px 15px 0 50px;
}
// 對(duì)第一個(gè)span標(biāo)簽的設(shè)置
&:first-child{
// 設(shè)置上左右為3px的圓角
.border-radius-top(3px);
// 設(shè)置背景圖片
background: url("../assets/images/pic/qq-black.png") #686868 no-repeat 12px center;
// 設(shè)置鼠標(biāo)劃上的效果
&:hover{
// 第一個(gè)圖標(biāo)劃上時(shí)設(shè)置上左右和下左為圓角璧函，并切換背景圖片，修改展示寬度
.border-radius-left(3px);
background: url("../assets/images/pic/qq-white.png") #686868 no-repeat 12px center;
width: 170px;
// 修改文字部分的padding
& > b{
padding-left: 0px;
}
}
}
// 對(duì)第一個(gè)span標(biāo)簽的設(shè)置
&:last-child{
// 設(shè)置下左右為3px的圓角
.border-radius-bottom(3px);
// 設(shè)置背景圖片
background: url("../assets/images/pic/wechat-black.png") #686868 no-repeat 12px center;
// 設(shè)置鼠標(biāo)劃上的效果
&:hover{
// 第一個(gè)圖標(biāo)劃上時(shí)設(shè)置上左和下左右為圓角基显，并切換背景圖片蘸吓，修改展示寬度
.border-radius-right(3px);
background: url("../assets/images/pic/wechat-white.png") #686868 no-repeat 12px center;
width: 170px;
// 修改文字部分的padding
& > b{
padding-left: 0px;
}
}
}
// 聯(lián)系方式的通用樣式
& > b{
display: block;
font-weight: normal;
// 這個(gè)地方的padding設(shè)置大一些，保證默認(rèn)狀態(tài)文字是顯示不了的
padding-left: 200px;
// 修改padding-left時(shí)使用的動(dòng)畫效果
.translation(padding-left, 1s);
// 針對(duì)聯(lián)系方式的兩個(gè)部分撩幽，設(shè)置不同字體大小
&:first-child{
font-size: @font-16px;
}
&:last-child{
font-size: @font-14px;
}
}
}
}
3库继、動(dòng)畫效果使用的是translation，傳入需要變化的屬性和時(shí)間即可窜醉，其他的圓角是border-radius宪萄，需要的參數(shù)不同，設(shè)置的圓角尺寸不同即可榨惰，動(dòng)畫效果是單獨(dú)寫了一個(gè)less文件拜英，需要的時(shí)候引入即可，非常方便琅催，通用的樣式我也是單獨(dú)放在一個(gè)less文件里面居凶。
下面是和上面配套的動(dòng)畫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 */
}
}
總結(jié)
1、按鈕部分（這里就是span標(biāo)簽）一定一定要設(shè)置float:right恢暖，否則兩個(gè)圖標(biāo)會(huì)一起伸縮排监，不能靠右固定；如果是懸窗再左邊杰捂，就設(shè)置float:left舆床，保證鼠標(biāo)劃上的時(shí)候兩個(gè)按鈕是不動(dòng)的；
2嫁佳、translation動(dòng)畫設(shè)置display屬性是不生效的挨队，所以這里用padding-left，讓信息再可視區(qū)域之外（外層容器設(shè)置overflow: hidden;）蒿往，鼠標(biāo)劃上的時(shí)候再重置一下盛垦，這樣就會(huì)有好看的動(dòng)畫效果了；
