大家好我是山河,今晚我给大家带来了一个很好看的按钮,动画效果很棒,代码大家自己借鉴吧。
话不多说,直接贴代码出来。
先上效果图(点击下面文字可以查看图片)
效果图
直接上代码
css代码块
a {
display: block;
width: 220px;
height: 70px;
z-index: 1;
}
a:after {
content: '';
background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
background-size: 400% 400%;
animation: gradient 3s ease-in-out infinite, border 0.5s forwards ease-in-out reverse;
}
a>span {
display: block;
background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 3s ease-in-out infinite;
}
.absolute-centering,
body:after,
a,
a:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.text-formatting,
a {
text-transform: uppercase;
text-decoration: none;
text-align: center;
letter-spacing: 2px;
line-height: 70px;
font-size: 28px;
}
@keyframes gradient {
0% {
background-position: 14% 0%;
}
50% {
background-position: 87% 100%;
}
100% {
background-position: 14% 0%;
}
}
@keyframes border {
0% {
-webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
}
25% {
-webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
}
50% {
-webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
}
}
html代码块
<a href="#"><span>按钮</span></a>
好了,本文到此结束。
我是山河