@-webkit-keyframes stripe-slide {
0% {
background-position:0% 0;
}
100% {
background-position:100% 0;
}
}@keyframes stripe-slide {
0% {
background-position:0% 0;
}
100% {
background-position:100% 0;
}
}.btn {
overflow:visible;
margin:0;
padding:0;
border:0;
background:transparent;
font:inherit;
line-height:normal;
cursor:pointer;
-moz-user-select:text;
text-decoration:none;
text-transform:uppercase;
padding:8px 20px 13px;
background-color:#fff;
color:#666;
border:2px solid #666;
border-radius:6px;
margin-bottom:6px;
transition:all 0.5s ease;
}
.btn::-moz-focus-inner {
padding:0;
border:0;
}
.btn--stripe {
overflow:hidden;
position:relative;
}
.btn--stripe:after {
content:"";
display:block;
height:7px;
width:100%;
background-image:repeating-linear-gradient(45deg,#000,#000 1px,transparent 2px,transparent 5px);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
border-top:1px solid #666;
position:absolute;
left:0;
bottom:0;
background-size:7px 7px;
}
.btn--stripe:hover,.btn--stripe:focus {
background-color:#189F92;
color:#fff;
border-color:#189F92;
outline:0 none;
}
.btn--stripe:hover:after,.btn--stripe:focus:after {
background-image:repeating-linear-gradient(45deg,#fff,#fff 1px,transparent 2px,transparent 5px);
border-top:1px solid #fff;
-webkit-animation:stripe-slide 12s infinite linear forwards;
animation:stripe-slide 12s infinite linear forwards;
}
.btn--large {
width:50%;
}
.btn--radius {
border-radius:36px;
}
.start {
border:1px solid #ddd;
padding:0.5rem 1rem;
border-radius:5px;
}
之前写的逻辑上有点小bug,因为不能在原地址上更新就重新发布了