@-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,因为不能在原地址上更新就重新发布了