纯CSS鼠标hover实现背景扇动效果
.la-btn {
padding:14px 20px;
background:#1abc9c;
color:#fff;
font-size:14px;
overflow:hidden;
transition:all .35s;
display:inline-block;
position:relative;
z-index:1;
}
.la-btn:hover {
color:#fff;
background:none;
}
.la-btn:before {
visibility:hidden;
content:"";
position:absolute;
left:50%;
top:0;
width:0;
height:100%;
background:#2a2b2c;
z-index:-1;
transform:skew(45deg,0);
transition:all .35s;
}
.la-btn:hover:before {
visibility:visible;
width:150%;
left:-25%;
}
.la-session-more {
text-align:center;
margin-top:30px;
}
.la-session-more a {
width:229px;
height:44px;
border:1px solid #dbdbdb;
padding:0;
background:none;
text-align:center;
color:#212121;
line-height:44px;
margin:0 15px;
text-decoration:none;
}
.la-session-more a:hover {
border-color:#2a2b2c;
background:none;
}
老 王
