之前看到的一段視頻 ! 因為 css 的動畫特效不常接觸, 在此分享給廣大邦友 !

影片中, youtuber 巧妙的利用 <span> 來完成按鈕邊框的

人生走馬燈動畫特效令我感到驚奇 !
原來 <span> 還能這樣用 ...

真正核心的 CSS 代碼也很單純 :

a span:nth-child(nx){
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right,#0c002b,#1779ff); 
  animation: animate_nx 2s linear infinite;
}
@keyframes animate_nx{
  0%
  {
    transform: translateX(-100%); 
  }
  100%
  {
    transform: translateX(100%);
  }
}

水平段因為比較長, 所以動畫進行兩秒

a span:nth-child(ny){
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom,#0c002b,#1779ff);
  animation: animate_ny 2s linear infinite;
  animation-delay: 1s;
}
@keyframes animate_ny{
  0%
  {
    transform: translateY(-100%); 
  }
  100%
  {
    transform: translateY(100%);
  }
}

垂直段則巧妙地讓動畫延遲一秒, 讓整體的動畫產生水平接續垂直的效果 !

有興趣的可直接點及下方我貼在 W3School 的連結
W3School 完整 Demo

ps. 不過我依樣畫葫蘆後, 按鈕中間的分色效果卻無法呈現 !
有成功分色按鈕的邦友在解惑一下吧 ! CSS 只是略懂略懂而已 !

原視頻出處: