下边展示这个是鼠标经过按钮时缓慢移动变换的效果
原始的效果：
中间变换效果：
最后的效果图：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按钮更换</title>
<style>
.agileinfo_more{
position: relative;
z-index: 1;
}
.agileinfo_more a{
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
display: inline-block;
letter-spacing: 5px;
font-size: 14px;
border: 2px solid #ccc;
}
.agileinfo_more a:focus {
color:red;
outline: none;
}
.link {
outline: none;
position: relative;
display: inline-block;
}
.link--kumya {
overflow: hidden;
padding: 15px 30px;
line-height: 1;
color: #000; /*字体颜色*/
}
.link--kumya:hover {
color:#fff;
}
.link--kumya::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
z-index: -1;
background: skyblue;/*覆盖后按钮颜色*/
-webkit-transform: translate3d(101%,0,0);
transform: translate3d(101%,0,0);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.link--kumya:hover::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.link--kumya span {
display: block;
position: relative;
}
.link--kumya span::before {
content: attr(data-letters);
position: absolute;
color: #fff;
left: 0;
overflow: hidden;
white-space: nowrap;
width: 0%;
-webkit-transition: width 0.5s;
transition: width 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.link--kumya:hover span::before {
width: 100%;
}
</style>
</head>
<body>
<div class="agileinfo_more">
<a class="link link--kumya" href="#" data-toggle="modal" data-target="#myModal"><span data-letters="了解更多">了解更多</span></a>
</div>
</body>
</html>
1568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
