Đường viền CSS chuyển tiếp vòng lặp hoạt ảnh vô hạn

Question

Tôi đã chụp this snippet of css mã trên internet, thực hiện hoạt ảnh xung quanh đường viền của nút khi di chuột. Tôi thấy nó rất đẹp.

Có cách nào để tùy chỉnh nó để làm cho vòng lặp hoạt hình biên giới vô hạn và không bị lơ lửng không?

đây là mã:

 button { 
 
      background: none; 
 
      border: 0; 
 
      box-sizing: border-box; 
 
      box-shadow: inset 0 0 0 2px #f45e61; 
 
      color: #f45e61; 
 
      font-size: inherit; 
 
      font-weight: 700; 
 
      margin: 1em; 
 
      padding: 1em 2em; 
 
      text-align: center; 
 
      text-transform: capitalize; 
 
      position: relative; 
 
      vertical-align: middle; 
 
     } 
 
     button::before, button::after { 
 
      box-sizing: border-box; 
 
      content: ''; 
 
      position: absolute; 
 
      width: 100%; 
 
      height: 100%; 
 
     } 
 

 
     .draw { 
 
      -webkit-transition: color 0.25s; 
 
      transition: color 0.25s; 
 
     } 
 
     .draw::before, .draw::after { 
 
      border: 2px solid transparent; 
 
      width: 0; 
 
      height: 0; 
 
     } 
 
     .draw::before { 
 
      top: 0; 
 
      left: 0; 
 
     } 
 
     .draw::after { 
 
      bottom: 0; 
 
      right: 0; 
 
     } 
 
     /* .draw:hover { 
 
      color: #60daaa; 
 
     }*/ 
 
     .draw:hover::before, .draw:hover::after { 
 
      width: 100%; 
 
      height: 100%; 
 
     } 
 
     .draw:hover::before { 
 
      border-top-color: #60daaa; 
 
      border-right-color: #60daaa; 
 
      -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; 
 
      transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; 
 
     } 
 
     .draw:hover::after { 
 
      border-bottom-color: #60daaa; 
 
      border-left-color: #60daaa; 
 
      -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; 
 
      transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; 
 
     }

<h1>CSS Border Transitions</h1> 
 
<button class="draw">draw</button>

cảm ơn

Answer 1

Bạn có thể sử dụng hầu hết các phong cách tương tự, nhưng với hình ảnh động CSS thay vì chuyển tiếp.

button { 
 
    background: none; 
 
    border: 0; 
 
    box-sizing: border-box; 
 
    box-shadow: inset 0 0 0 2px #f45e61; 
 
    color: #f45e61; 
 
    font-size: inherit; 
 
    font-weight: 700; 
 
    margin: 1em; 
 
    padding: 1em 2em; 
 
    text-align: center; 
 
    text-transform: capitalize; 
 
    vertical-align: middle; 
 
} 
 
.draw { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.draw::before, .draw::after { 
 
    content: ''; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    border: 2px solid transparent; 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.draw::before { 
 
    top: 0; 
 
    left: 0; 
 
    border-top-color: #60daaa; 
 
    border-right-color: #60daaa; 
 
    animation: border 2s infinite; 
 
} 
 
.draw::after { 
 
    bottom: 0; 
 
    right: 0; 
 
    animation: border 2s 1s infinite, borderColor 2s 1s infinite; 
 
} 
 

 
@keyframes border { 
 
    0% { 
 
    width: 0; 
 
    height: 0; 
 
    } 
 
    25% { 
 
    width: 100%; 
 
    height: 0; 
 
    } 
 
    50% { 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
    100% { 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
} 
 
@keyframes borderColor { 
 
    0% { 
 
    border-bottom-color: #60daaa; 
 
    border-left-color: #60daaa; 
 
    } 
 
    50% { 
 
    border-bottom-color: #60daaa; 
 
    border-left-color: #60daaa; 
 
    } 
 
    51% { 
 
    border-bottom-color: transparent; 
 
    border-left-color: transparent; 
 
    } 
 
    100% { 
 
    border-bottom-color: transparent; 
 
    border-left-color: transparent; 
 
    } 
 
}

<h1>CSS Border Transitions</h1> 
 
<button class="draw">draw</button>