实用的CSS鼠标滑过按钮特效10种代码篇.docx
《实用的CSS鼠标滑过按钮特效10种代码篇.docx》由会员分享，可在线阅读，更多相关《实用的CSS鼠标滑过按钮特效10种代码篇.docx（18页珍藏版）》请在冰点文库上搜索。
实用的CSS鼠标滑过按钮特效10种代码篇
实用的CSS鼠标滑过按钮特效（10种代码篇）
/*效果一*/
.button1{
-webkit-transition:
all0.5s;
transition:
all0.5s;
}
.button1:
hover{
background-color:
rgba（255,255,255,0.2）;
border-radius:
20px;
}
/*效果二*/
.button2{
-webkit-transition:
all0.5s;
transition:
all0.5s;
overflow:
hidden;
position:
relative;
}
.button2:
hover{
background-color:
rgba（255,255,255,0.2）;
}
.button2>span{
-webkit-transition:
all0.3s;
transition:
all0.3s;
}
.button2:
hover>span{
opacity:
0;
}
.button2:
:
after{
content:
attr（data-text）;
width:
100%;
height:
100%;
position:
absolute;
left:
-50px;
top:
0;
opacity:
0;
-webkit-transition:
all0.5s;
transition:
all0.5s;
}
.button2:
hover:
:
after{
left:
0;
opacity:
1;
}
/*效果三*/
.button3{
-webkit-transition:
all0.5s;
transition:
all0.5s;
overflow:
hidden;
position:
relative;
}
.button3:
hover{
background-color:
rgba（255,255,255,0.2）;
}
.button3>span{
-webkit-transition:
all0.3s;
transition:
all0.3s;
}
.button3:
hover>span{
opacity:
0;
}
.button3:
:
after{
content:
attr（data-text）;
width:
100%;
height:
100%;
position:
absolute;
left:
0;
top:
0;
opacity:
0;
-webkit-transform:
translate（-9%,-50%）rotate（-9deg）;
transform:
translate（-9%,-50%）rotate（-9deg）;
-webkit-transition:
all0.3s;
transition:
all0.3s;
}
.button3:
hover:
:
after{
-webkit-transform:
translate（0,0）rotate（0deg）;
transform:
translate（0,0）rotate（0deg）;
opacity:
1;
}
/*效果四*/
.button4{
position:
relative;
overflow:
hidden;
}
.button4span{
z-index:
2;
}
.button4:
:
after{
content:
"";
width:
100%;
height:
100%;
z-index:
1;
opacity:
0;
position:
absolute;
left:
0;
top:
0;
background-color:
rgba（255,255,255,0.5）;
-webkit-transition:
all0.5s;
transition:
all0.5s;
}
.button4:
hover:
:
after{
opacity:
1;
-webkit-transform:
skewX（-180deg）scale（0.5,1）;
transform:
skewX（-180deg）scale（0.5,1）;
}
/*效果五*/
.button5{
border:
none;
position:
relative;
}
.button5:
:
before{
content:
'';
position:
absolute;
left:
0;
top:
0;
width:
100%;
height:
100%;
border:
1pxsolidrgba（255,255,255,0.5）;
-webkit-transition:
all0.5s;
transition:
all0.5s;
}
.button5:
hover:
:
before{
opacity:
0;
-webkit-transform:
scale（1.2,1.2）;
transform:
scale（1.2,1.2）;
}
.button5:
:
after{
content:
'';
width:
100%;
height:
100%;
position:
absolute;
left:
0;
top:
0;
opacity:
0;
background-color:
rgba（255,255,255,0.5）;
-webkit-transform:
scale（0.5,0.5）;
transform:
scale（0.5,0.5）;
-webkit-transition:
all0.5s;
transition:
all0.5s;
}
.button5:
hover:
:
after{
opacity:
1;
-webkit-transform:
scale（1,1）;
transform:
scale（1,1）;
}
/*效果六*/
.button6{
border:
none;
position:
relative;
}
.button6:
:
before{
content:
'';
position:
absolute;
left:
0;
top:
0;
width:
100%;
height:
100%;
background-color:
rgba（255,255,255,0.5）;
-webkit-transition:
all0.5s;
transition:
all0.5s;
}
.button6:
hover:
:
before{
opacity:
0;
-webkit-transform:
scale（0.5,0.5）;
transform:
scale（0.5,0.5）;
}
.button6:
:
after{
content:
'';
width:
100%;
height:
100%;
position:
absolute;
left:
0;
top:
0;
opacity:
0;
border:
1pxsolidrgba（255,255,255,0.5）;
-webkit-transform:
scale（1.2,1.2）;
transform:
scale（1.2,1.2）;
-webkit-transition:
all0.5s;
transition:
all0.5s;
}
.button6:
hover:
:
after{
opacity:
1;
-webkit-transform:
scale（1,1）;
transform:
scale（1,1）;
}
/*效果七27*/
.button7{
border:
1pxsolidrgba（255,255,255,0.5）;
-webkit-transition:
all0.5s;
transition:
all0.5s;
overflow:
hidden;
position:
relative;
}
.button7:
hover{
border:
1pxsolidrgba（255,255,255,0）;
}
.button7:
:
before{
content:
'';
position:
absolute;
left:
0;
bottom:
0;
width:
100%;
height:
1px;
background-color:
rgba（255,255,255,0.5）;
-webkit-transform:
translate（-100%,-600%）rotate（9deg）;
transform:
translate（-100%,-600%）rotate（9deg）;
-webkit-transition-timing-function:
cubic-bezier（0.75,0,0.125,1）;
transition-timing-function:
cubic-bezier（0.75,0,0.125,1）;
-webkit-transition:
all0.5s;
transition:
all0.5s;
}
.button7:
hover:
:
before{
-webkit-transform:
translate（0,0）;
transform:
translate（0,0）;
}
/*效果八*/
.button8{
color:
rgba（255,255,255,1）;
border:
none;
position:
relative;
}
.button8:
hover>span{
letter-spacing:
2px;
}
.button8:
:
before{
content:
'';
position:
absolute;
left:
0;
top:
0;
width:
100%;
height:
100%;
z-index:
1;
opacity:
0;
-webkit-transition:
all0.3s;
transition:
all0.3s;
border-top-width:
1px;
border-bottom-width:
1px;
border-top-style:
solid;
border-bottom-style:
solid;
border-top-color:
rgba（255,255,255,0.5）;
border-bottom-color:
rgba（255,255,255,0.5）;
-webkit-transform:
scale（0.1,1）;
transform:
scale（0.1,1）;
}
.button8:
hover:
:
before{
opacity:
1;
-webkit-transform:
scale（1,1）;
transform:
scale（1,1）;
}
.button8:
:
after{
content:
'';
position:
absolute;
left:
0;
top:
0;
width:
100%;
height:
100%;
z-index:
1;
background-color:
rgba（255,255,255,0.25）;
-webkit-transition:
all0.3s;
transition:
all0.3s;
}
.button8:
hover:
:
after{
opacity:
0;
-webkit-transform:
scale（0.1,1）;
transform:
scale（0.1,1）;
}
/*效果九*/
.button9{
color:
rgba（255,255,255,1）;
border:
none;
position:
relative;
border-top-width:
1px;
border-bottom-width:
1px;
border-top-style:
solid;
border-bottom-style:
solid;
border-top-color:
rgba（255,255,255,0.5）;
border-bottom-color:
rgba（255,255,255,0.5）;
-webkit-transition:
all0.3s;
transition:
all0.3s;
}
.button9:
hoverspan{
letter-spacing:
2px;
}
.button9:
hover{
border-top-color:
rgba（255,255,255,0）;
border-bottom-color:
rgba（255,255,255,0）;
}
.button9:
:
before{
content:
'';
position:
absolute;
top:
0;
right:
0;
width:
1px;
height:
100%;
z-index:
1;
-webkit-transition:
all0.3s;
transition:
all0.3s;
background-color:
rgba（255,255,255,0.5）;
}
.button9:
hover:
:
before{
-webkit-transform:
translate（-76px,0）rotate（270deg）;
transform:
translate（-76px,0）rotate（270deg）;
}
.button9:
:
after{
content:
'';
position:
absolute;
top:
0;
left:
0;
width:
1px;
height:
100%;
z-index:
1;
-webkit-transition:
all0.3s;
transition:
all0.3s;
background-color:
rgba（255,255,255,0.5）;
}
.button9:
hover:
:
after{
-webkit-transform:
translate（76px,0）rotate（180deg）;
transform:
translate（76px,0）rotate（180deg）;
}
/*效果十*/
.button10{
-webkit-transition:
all0.3s;
transition:
all0.3s;
}
.button10:
hover{
-webkit-animation-name:
move;
animation-name:
move;
-webkit-animation-duration:
1s;
animation-duration:
1s;
-webkit-animation-fill-mode:
both;
animation-fill-mode:
both;
background-color:
rgba（255,255,255,0.2）;
}
@-webkit-keyframesmove{
from,11.1%,to{
-webkit-transform:
none;
transform:
none;
}
22.2%{
-webkit-transform:
skewX（-12.5deg）skewY（-12.5deg）;
transform:
skewX（-12.5deg）skewY（-12.5deg）;
}
33.3%{
-webkit-transform:
skewX（6.25deg）skewY（6.25deg）;
transform:
skewX（6.25deg）skewY（6.25deg）;
}
44.4%{
-webkit-transform:
skewX（-3.125deg）skewY（-3.125deg）;
transform:
skewX（-3.125deg）skewY（-3.125deg）;
}
55.5%{
-webkit-transform:
skewX（1.5625deg）skewY（1.5625deg）;
transform:
skewX（1.5625deg）skewY（1.5625deg）;
}
66.6%{
-webkit-transform:
skewX（-0.78125deg）skewY（-0.78125deg）;
transform:
skewX（-0.78125deg）skewY（-0.78125deg）;
}
77.7%{
-webkit-transform:
skewX（0.390625deg）skewY（0.390625deg）;
transform:
skewX（0.390625deg）skewY（0.390625deg）;
}
88.8%{
-webkit-transform:
skewX（-0.1953125deg）skewY（-0.1953125deg）;
transform:
skewX（-0.1953125deg）skewY（-0.1953125deg）;
}
}
@keyframesmove{
from,11.1%,to{
-webkit-transform:
none;
transform:
none;
}
22.2%{
-webkit-transform:
skewX（-12.5deg）skewY（-12.5deg）;
transform:
skewX（-12.5deg）skewY（-12.5deg）;
}
33.3%{
-webkit-transform:
skewX（6.25deg）skewY（6.25deg）;
transform:
skewX（6.25deg）skewY（6.25deg）;
}
44.4%{
-webkit-transform:
skewX（-3.125deg）skewY（-3.125deg）;
transform:
skewX（-3.125deg）skewY（-3.125deg）;
}
55.5%{
-webkit-transform:
skewX（1.5625deg）skewY（1.5625deg）;
transform:
skewX（1.5625deg）skewY（1.5625deg）;
}
66.6%{
-webkit-transform:
skewX（-0.78125deg）skewY（-0.78125deg）;
transform:
skewX（-0.78125deg）skewY（-0.78125deg）;
}
77.7%{
-webkit-transform:
skewX（0.390625deg）skewY（0.390625deg）;
transform:
skewX（0.390625deg）skewY（0.390625deg）;
}
88.8%{
-webkit-transform:
skewX（-0.1953125deg）skewY（-0.1953125deg）;
transform:
skewX（-0.1953125deg）skewY（-0.1953125deg）;
}
}
login1