纯CSS鼠标hover实现背景动画效果
原创Mr.王征 最后发布于2019-03-04 10:15:19 阅读数 916 收藏
展开
效果展示：
源码展示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS鼠标hover实现背景扇动效果</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="la-session-more"><a href="#" class="la-btn">老 王</a></div>
</body>
</html>
