2020_12_20

霓虹灯按钮

  1. 		<a href="#">
  2. 			<span></span>
  3. 			<span></span>
  4. 			<span></span>
  5. 			<span></span>
  6. 			霓虹灯 按钮
  7. 		</a>

这四个 span 标签用来模拟上下左右四根线

  • body 代码

    1. body{
    2.   margin: 0;
    3.   padding: 0;
    4.   /* flex 布局 */
    5.   display: flex;
    6.   justify-content: center;
    7.   align-items: center;
    8.   min-height: 100vh;
    9.   background: #031321;
    10.   font-family: 华文琥珀;
    11. }

    应用到了 flex 布局, 将内容显示在屏幕中央

  • a 标签

    1. a{
    2.   /* 为绝对定位做参考点 */
    3.   position: relative;
    4.   display: inline-block;
    5.   /* 将文字与线分割开 */
    6.   padding: 15px 30px;
    7.   color: #2196f3;
    8.   /* 文字间隔 */
    9.   letter-spacing: 4px;
    10.   text-decoration: none;
    11.   font-size: 24px;
    12.   /* 隐藏越界的线 */  
    13.   overflow: hidden;
    14.   /* 附在 a 上的动画, 触发时和回退时均有效 */
    15.   transition: 0.2s;
    16. }

    需要注意的是 transition, 放在 a 标签而不是 a:hover 标签里的原因是, 放在 a 标签, 移入移出均有效果, 而放在 a:hover 中, 移入有效果, 移出没效果

  • a:hover

    1. a:hover{
    2.   color: #255784;
    3.   background: #2196f3;
    4.   /* 多个阴影模拟霓虹灯 */
    5.   box-shadow:
    6.           0 0 10px #2196f3,0 0 40px #2196f3,0 0 10px #2196f3,0 0 80px #2196f3;
    7.   /* 有延迟 */
    8.   transition-delay: 1s;
    9. }

    这里有三个动画, color, backgroud 和 box-shadow, background 由透明变为 #2196f3, 效果对比如下

  • 最重要的移动线条

    1. a span{
    2.   position: absolute;
    3.   display: block;
    4. }
    5. a span:nth-child(1){
    6.    top: 0;
    7.    left: -100%;
    8.    width: 100%;
    9.    height: 2px;
    10.    background: linear-gradient(90deg, transparent, #2196f3);
    11.  }
    12. a:hover span:nth-child(1){
    13.   left: 100%;
    14.   transition: 1s;
    15. }

    首先, 将所有的 span 设为绝对定位, a 为相对定位. 将上方的线从左边移动到右边, 在 a 选择器中设置了 overflow: hidden, 因此越界的线被隐藏了. 将 left 固定为 0 的效果如下.

    当left从 -100% 到 100% 是就有了闪过的效果,

  • 再介绍一个右边的线条, 其余的一样

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

    注意, background, 是一根竖线, 宽 2px, 高 100%, 若 top 一直为 0 时效果如下

  1. html

    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.   <meta charset="utf-8">
    5.   <title></title>
    6.   <link rel="stylesheet" href="2020_12_20.css">
    7.  </head>
    8.  <body>
    9.   <a href="#">
    10.    <span></span>
    11.    <span></span>
    12.    <span></span>
    13.    <span></span>
    14.    霓虹灯 按钮
    15.   </a>
    16.  </body>
    17. </html>

  2. css

    1. body{
    2.   margin: 0;
    3.   padding: 0;
    4.   /* flex 布局 */
    5.   display: flex;
    6.   justify-content: center;
    7.   align-items: center;
    8.   min-height: 100vh;
    9.   background: #031321;
    10.   font-family: 华文琥珀;
    11. }
    12. a{
    13.   /* 为绝对定位做参考点 */
    14.   position: relative;
    15.   display: inline-block;
    16.   /* 将文字与线分割开 */
    17.   padding: 15px 30px;
    18.   color: #2196f3;
    19.   /* 文字间隔 */
    20.   letter-spacing: 4px;
    21.   text-decoration: none;
    22.   font-size: 24px;
    23.   overflow: hidden;
    24.   /* 附在 a 上的动画, 触发时和回退时均有效 */
    25.   transition: 0.2s;
    26. }
    27. a:hover{
    28.   color: #255784;
    29.   background: #2196f3;
    30.   /* 多个阴影模拟霓虹灯 */
    31.   box-shadow:
    32.           0 0 10px #2196f3,0 0 40px #2196f3,0 0 10px #2196f3,0 0 80px #2196f3;
    33.   /* 有延迟 */
    34.   transition-delay: 1s;
    35. }
    36. a span{
    37.   position: absolute;
    38.   display: block;
    39. }
    40. a span:nth-child(1){
    41.    top: 0;
    42.    left: -100%;
    43.    width: 100%;
    44.    height: 2px;
    45.    background: linear-gradient(90deg, transparent, #2196f3);
    46.  }
    47. a:hover span:nth-child(1){
    48.   left: -100%;
    49.   transition: 1s;
    50. }
    51. a span:nth-child(3){
    52.    bottom: 0;
    53.    left: 100%;
    54.    width: 100%;
    55.    height: 2px;
    56.    background: linear-gradient(270deg, transparent, #2196f3);
    57.  }
    58. a:hover span:nth-child(3){
    59.   left: -100%;
    60.   transition: 1s .5s;
    61. }
    62. a span:nth-child(2){
    63.   right: 0;
    64.   top: -100%;
    65.   width: 2px;
    66.   height: 100%;
    67.   background: linear-gradient(180deg, transparent, #2196f3);
    68. }
    69. a:hover span:nth-child(2){
    70.   top: 100%;
    71.   transition: 1s .25s;
    72. }
    73. a span:nth-child(4){
    74.   left: 0;
    75.   top: 100%;
    76.   width: 2px;
    77.   height: 100%;
    78.   background: linear-gradient(360deg, transparent, #2196f3);
    79. }
    80. a:hover span:nth-child(4){
    81.   top: -100%;
    82.   transition: 1s .75s;
    83. }

版权声明：本文为xiaxiangx原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaxiangx/p/14164984.html