字体实现霓虹灯效果，有需要的可以自行添加，记录一下，有可能用的上，现阶段暂时不考虑使用。

可以使用以下网址在线实现：

引用站外地址
codepen
前端代码实现

实现区域：

  1. 一个是大标题和个人信息的动态霓虹灯，默认周期为 1200ms
  2. 另外的是菜单栏的小字有夜光效果，为你的博客增添几分赛博朋克风～

黑夜霓虹灯（js实现）

  1. 首先在自定义css样式文件

    [BlogRoot]\source\css\custom.css 中引入以下代码，这部分代码是菜单栏文字有夜光效果的，变量部分 var(--theme-color) 可以换为自己喜欢的颜色，例如紫色 rgb(179, 71, 241)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /* 夜间模式菜单栏发光字 */
    [data-theme="dark"] #nav .site-page,
    [data-theme="dark"] #nav .menus_items .menus_item .menus_item_child li a {
      text-shadow: 0 0 2px var(--theme-color) !important;
    }

    /* 手机端适配 */
    [data-theme="dark"] #sidebar #sidebar-menus .menus_items .site-page {
      text-shadow: 0 0 2px var(--theme-color) !important;
    }
    /* 闪烁变动颜色连续渐变 */
    #site-name,
    #site-title,
    #site-subtitle,
    #post-info,
    .author-info__name,
    .author-info__description {
      transition: text-shadow 1s linear !important;
    }

  2. 新建自定义JS文件

    [BlogRoot]\source\js\light.js 并写入以下代码，本质就是计时器，大家可以根据自己的喜好调节闪烁周期，默认为 1200ms：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    // 霓虹灯效果
    // 颜色数组
    var arr = ["#39c5bb", "#f14747", "#f1a247", "#f1ee47", "#b347f1", "#1edbff", "#ed709b", "#5636ed"];
    // 颜色索引
    var idx = 0;

    // 切换颜色
    function changeColor() {
        // 仅夜间模式才启用
        if (document.getElementsByTagName('html')[0].getAttribute('data-theme') == 'dark') {
            if (document.getElementById("site-name"))
                document.getElementById("site-name").style.textShadow = arr[idx] + " 0 0 15px";
            if (document.getElementById("site-title"))
                document.getElementById("site-title").style.textShadow = arr[idx] + " 0 0 15px";
            if (document.getElementById("site-subtitle"))
                document.getElementById("site-subtitle").style.textShadow = arr[idx] + " 0 0 10px";
            if (document.getElementById("post-info"))
                document.getElementById("post-info").style.textShadow = arr[idx] + " 0 0 5px";
            try {
                document.getElementsByClassName("author-info__name")[0].style.textShadow = arr[idx] + " 0 0 12px";
                document.getElementsByClassName("author-info__description")[0].style.textShadow = arr[idx] + " 0 0 12px";
            } catch {
                
            }
            idx++;
            if (idx == 8) {
                idx = 0;
            }
        } else {
            // 白天模式恢复默认
            if (document.getElementById("site-name"))
                document.getElementById("site-name").style.textShadow = "#1e1e1ee0 1px 1px 1px";
            if (document.getElementById("site-title"))
                document.getElementById("site-title").style.textShadow = "#1e1e1ee0 1px 1px 1px";
            if (document.getElementById("site-subtitle"))
                document.getElementById("site-subtitle").style.textShadow = "#1e1e1ee0 1px 1px 1px";
            if (document.getElementById("post-info"))
                document.getElementById("post-info").style.textShadow = "#1e1e1ee0 1px 1px 1px";
            try {
                document.getElementsByClassName("author-info__name")[0].style.textShadow = "";
                document.getElementsByClassName("author-info__description")[0].style.textShadow = "";
            } catch {
                
            }
        }
    }

    // 开启计时器
    window.onload = setInterval(changeColor, 1200);

  3. 引入文件

    在主题配置文件_config.butterfly.yml 引入以上两个文件，要注意的是，js 文件这里必须为 defer，不能为 ansyc，保证脚本会延迟到整个页面都解析完后再执行，此时才有对应的元素进行操作：

    1
    2
    3
    4
    5
    inject:
      head:
        - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
      bottom: 
        - <script defer src="/js/light.js"></script> # 霓虹灯(必须defer否则有时候会不生效)

    黑夜霓虹灯（纯CSS实现（推荐））

    推荐使用css，在性能方面还是直接使用css比较友好，如果使用js，还得执行js文件，比较耗资源，不推荐使用。

    1. 在自定义的custom.css中添加如下代码，实现的原理就是关键帧线性插值，然后一直循环，这里默认是左上角标题、中间标题和副标题，还有文章页头的标题和信息有循环霓虹灯，菜单的文字实现起来要改一下源码，自行更改。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      /* 日间模式不生效 */
      [data-theme="light"] #site-name,
      [data-theme="light"] #site-title,
      [data-theme="light"] #site-subtitle,
      [data-theme="light"] #post-info {
        animation: none;
      }
      /* 夜间模式生效 */
      [data-theme="dark"] #site-name,
      [data-theme="dark"] #site-title {
        animation: light_15px 10s linear infinite;
      }
      [data-theme="dark"] #site-subtitle {
        animation: light_10px 10s linear infinite;
      }
      [data-theme="dark"] #post-info {
        animation: light_5px 10s linear infinite;
      }
      /* 关键帧描述 */
      @keyframes light_15px {
        0% {
          text-shadow: #5636ed 0 0 15px;
        }
        12.5% {
          text-shadow: #11ee5e 0 0 15px;
        }
        25% {
          text-shadow: #f14747 0 0 15px;
        }
        37.5% {
          text-shadow: #f1a247 0 0 15px;
        }
        50% {
          text-shadow: #f1ee47 0 0 15px;
        }
        50% {
          text-shadow: #b347f1 0 0 15px;
        }
        62.5% {
          text-shadow: #002afa 0 0 15px;
        }
        75% {
          text-shadow: #ed709b 0 0 15px;
        }
        87.5% {
          text-shadow: #39c5bb 0 0 15px;
        }
        100% {
          text-shadow: #5636ed 0 0 15px;
        }
      }

      @keyframes light_10px {
        0% {
          text-shadow: #5636ed 0 0 10px;
        }
        12.5% {
          text-shadow: #11ee5e 0 0 10px;
        }
        25% {
          text-shadow: #f14747 0 0 10px;
        }
        37.5% {
          text-shadow: #f1a247 0 0 10px;
        }
        50% {
          text-shadow: #f1ee47 0 0 10px;
        }
        50% {
          text-shadow: #b347f1 0 0 10px;
        }
        62.5% {
          text-shadow: #002afa 0 0 10px;
        }
        75% {
          text-shadow: #ed709b 0 0 10px;
        }
        87.5% {
          text-shadow: #39c5bb 0 0 10px;
        }
        100% {
          text-shadow: #5636ed 0 0 10px;
        }
      }

      @keyframes light_5px {
        0% {
          text-shadow: #5636ed 0 0 5px;
        }
        12.5% {
          text-shadow: #11ee5e 0 0 5px;
        }
        25% {
          text-shadow: #f14747 0 0 5px;
        }
        37.5% {
          text-shadow: #f1a247 0 0 15px;
        }
        50% {
          text-shadow: #f1ee47 0 0 5px;
        }
        50% {
          text-shadow: #b347f1 0 0 5px;
        }
        62.5% {
          text-shadow: #002afa 0 0 5px;
        }
        75% {
          text-shadow: #ed709b 0 0 5px;
        }
        87.5% {
          text-shadow: #39c5bb 0 0 5px;
        }
        100% {
          text-shadow: #5636ed 0 0 5px;
        }
      }

    hexo cl && hexo g && hexo s 三连看效果