每日CSS_霓虹燈按鈕懸停效果

隨遇丿而安發表於2020-12-20
CSS

每日CSS_霓虹燈按鈕懸停效果

2020_12_20

霓虹燈按鈕

原始碼連結

1. 程式碼解析

1.1 html 程式碼片段解析

      <a href="#">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            霓虹燈 按鈕
      </a>

這四個 span 標籤用來模擬上下左右四根線


1.2 CSS 程式碼片段解析

  • body 程式碼

    body{
  margin: 0;
  padding: 0;
  /* flex 佈局 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #031321;
  font-family: 華文琥珀;
}

    應用到了 flex 佈局, 將內容顯示在螢幕中央

  • a 標籤

    a{
  /* 為絕對定位做參考點 */
  position: relative;
  display: inline-block;
  /* 將文字與線分割開 */
  padding: 15px 30px;
  color: #2196f3;
  /* 文字間隔 */
  letter-spacing: 4px;
  text-decoration: none;
  font-size: 24px;
  /* 隱藏越界的線 */  
  overflow: hidden;
  /* 附在 a 上的動畫, 觸發時和回退時均有效 */
  transition: 0.2s;
}

    需要注意的是 transition, 放在 a 標籤而不是 a:hover 標籤裡的原因是, 放在 a 標籤, 移入移出均有效果, 而放在 a:hover 中, 移入有效果, 移出沒效果

  • a:hover

    a:hover{
  color: #255784;
  background: #2196f3;
  /* 多個陰影模擬霓虹燈 */
  box-shadow:
          0 0 10px #2196f3,0 0 40px #2196f3,0 0 10px #2196f3,0 0 80px #2196f3;
  /* 有延遲 */
  transition-delay: 1s;
}

    這裡有三個動畫, color, backgroud 和 box-shadow, background 由透明變為 #2196f3, 效果對比如下

  • 最重要的移動線條

    a span{
  position: absolute;
  display: block;
}
a span:nth-child(1){
   top: 0;
   left: -100%;
   width: 100%;
   height: 2px;
   background: linear-gradient(90deg, transparent, #2196f3);
 }
a:hover span:nth-child(1){
  left: 100%;
  transition: 1s;
}

    首先, 將所有的 span 設為絕對定位, a 為相對定位. 將上方的線從左邊移動到右邊, 在 a 選擇器中設定了 overflow: hidden, 因此越界的線被隱藏了. 將 left 固定為 0 的效果如下.

    當left從 -100% 到 100% 是就有了閃過的效果,

  • 再介紹一個右邊的線條, 其餘的一樣

    a span:nth-child(2){
  right: 0;
  top: -100%;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #2196f3);
}
a:hover span:nth-child(2){
  top: 100%;
  transition: 1s .25s;
}

    注意, background, 是一根豎線, 寬 2px, 高 100%, 若 top 一直為 0 時效果如下


2. 原始碼如下

  1. html

    <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="2020_12_20.css">
 </head>
 <body>
  <a href="#">
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   霓虹燈 按鈕
  </a>
 </body>
</html>

  2. css

    body{
  margin: 0;
  padding: 0;
  /* flex 佈局 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #031321;
  font-family: 華文琥珀;
}
a{
  /* 為絕對定位做參考點 */
  position: relative;
  display: inline-block;
  /* 將文字與線分割開 */
  padding: 15px 30px;
  color: #2196f3;
  /* 文字間隔 */
  letter-spacing: 4px;
  text-decoration: none;
  font-size: 24px;
  overflow: hidden;
  /* 附在 a 上的動畫, 觸發時和回退時均有效 */
  transition: 0.2s;
}
a:hover{
  color: #255784;
  background: #2196f3;
  /* 多個陰影模擬霓虹燈 */
  box-shadow:
          0 0 10px #2196f3,0 0 40px #2196f3,0 0 10px #2196f3,0 0 80px #2196f3;
  /* 有延遲 */
  transition-delay: 1s;
}
a span{
  position: absolute;
  display: block;
}
a span:nth-child(1){
   top: 0;
   left: -100%;
   width: 100%;
   height: 2px;
   background: linear-gradient(90deg, transparent, #2196f3);
 }
a:hover span:nth-child(1){
  left: -100%;
  transition: 1s;
}
a span:nth-child(3){
   bottom: 0;
   left: 100%;
   width: 100%;
   height: 2px;
   background: linear-gradient(270deg, transparent, #2196f3);
 }
a:hover span:nth-child(3){
  left: -100%;
  transition: 1s .5s;
}
a span:nth-child(2){
  right: 0;
  top: -100%;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #2196f3);
}
a:hover span:nth-child(2){
  top: 100%;
  transition: 1s .25s;
}
a span:nth-child(4){
  left: 0;
  top: 100%;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #2196f3);
}
a:hover span:nth-child(4){
  top: -100%;
  transition: 1s .75s;
}

相關文章