每日CSS_霓虹灯按钮悬停效果

每日CSS_霓虹灯按钮悬停效果

2020_12_20

每日CSS_霓虹灯按钮悬停效果


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, 效果对比如下

    每日CSS_霓虹灯按钮悬停效果

    每日CSS_霓虹灯按钮悬停效果

  • 最重要的移动线条

    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 的效果如下.

    每日CSS_霓虹灯按钮悬停效果

    当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 时效果如下

    每日CSS_霓虹灯按钮悬停效果


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;
    }
    
上一篇:css选择器常用技巧


下一篇:less使用变量减少伪类:nth-child代码