实用的CSS鼠标滑过按钮特效10种代码篇.docx
- 文档编号:26386602
- 上传时间:2023-06-18
- 格式:DOCX
- 页数:18
- 大小:15.53KB
实用的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
login2
login3