资源
网址
七彩动画.gif
源码
.create-button {
text-align: left;
font-size: 1.2rem;
border: none;
margin-right: 0;
position: relative;
background: none;
color: white
}
.create-button::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: -webkit-gradient(linear, left top, right top, from(#0ebeff), color-stop(#ffdd40), color-stop(#ae63e4), color-stop(#47cf73), color-stop(#0ebeff), color-stop(#ffdd40), color-stop(#ae63e4), to(#47cf73));
background: linear-gradient(90deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
background-size: 200% 200%
}
.create-button:focus::after,.create-button:hover::after {
-webkit-animation: rainbow-border 1.5s linear infinite;
animation: rainbow-border 1.5s linear infinite
}
@-webkit-keyframes rainbow-border {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 200% 50%
}
}
@keyframes rainbow-border {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 200% 50%
}
}
网友评论