【wordpress美化】适用于晚上为黑色背景的主题，顶部导航下面出现一排闪亮的小桔灯

【wordpress美化】适用于晚上为黑色背景的主题，顶部导航下面出现一排闪亮的小桔灯,像夜市一样，给网站增加一点烟火气。

默认出现时间为晚8点到早8点，距离顶部为50px；可以根据自己的需求修改
下面的代码加入到主题目录下function.php中：

此处内容已隐藏，请评论后刷新页面查看.

CSS代码加入到主题自定义CSS代码里面：

/*小桔灯*/
  #xiaojudeng{
            position: fixed;
            z-index: 999;
            top: 50px; //到顶部的距离。
            pointer-events: none;
            width: 100%;
            height: 120px;
            white-space: nowrap;
            overflow: hidden;
        }
        #xiaojudeng li{
            display: inline-block;
            margin-top: 15px;
            margin-right: 50px;
            width: 15px;
            height: 30px;
            border-radius: 50%;
            position: relative;
        }
        #xiaojudeng li::after{
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 12px;
            background-color: #727472;
            box-shadow: inset 0 0 3px #c3c3bd;
            border-radius: 10px;

        }
        #xiaojudeng li::before{
            content: '';
            position: absolute;
            top: -23px;
            left: 15px;
            width: 55px;
            height: 30px;
            border-bottom: 3px solid  #e7e7e7;
            border-radius: 50%;
        }
        #xiaojudeng li:nth-of-type(2n+1){
           animation: lan 2s  infinite;
        }#xiaojudeng li:nth-child(2n+2){
            animation: huang 2.2s infinite;
        }#xiaojudeng li:nth-child(3n+3){
            animation: zhi 1.8s infinite;
        }
       #xiaojudeng li:nth-child(4n+4){
        animation: lv 2.8s infinite;
       }

        @keyframes lan{
            0%,100%{
                background-color: rgba(4, 255, 242, 0.5);
            }
            50%{
                background-color: rgb(4, 255, 242);
                box-shadow: 0 0 10px rgb(4, 255, 242),
                0 0 30px rgb(4, 255, 242),
                0 0 50px rgb(4, 255, 242);              
            }
        }
        @keyframes huang{
            0%,100%{
                background-color: rgba(251, 255, 4,.5);
            }
            50%{
                background-color: rgb(251, 255, 4);
                box-shadow: 0 0 10px rgb(251, 255, 4),
                0 0 12px rgb(251, 255, 4),
                0 0 30px rgb(251, 255, 4);              
            }
        }
        @keyframes lv{
            0%,100%{
                background-color: rgba(33, 255, 4,.5);
            }
            50%{
                background-color: rgb(33, 255, 4);
                box-shadow: 0 0 10px rgb(33, 255, 4),
                0 0 12px rgb(33, 255, 4),
                0 0 30px rgb(33, 255, 4);              
            }
        }
        @keyframes zhi{
            0%,100%{
                background-color:  rgba(255, 4, 255,.5);
            }
            50%{
                background-color: rgb(255, 4, 255);
                box-shadow: 0 0 10px  rgb(255, 4, 255),
                0 0 25px  rgb(255, 4, 255),
                0 0 40px  rgb(255, 4, 255);              
            }
        }

如果你喜欢我们的文章，欢迎您分享或收藏路人粉的文章！我们网站的目标是帮助每一个有求知欲的人，无论他们的水平和经验如何。我们相信，只要有热情和毅力，无论从什么时候开始学习都不晚。

1. 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ2766242327进行删除处理。
2. 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
★特别声明：
本站为个人博客，博客所发布的一切修改补丁、注册机、注册信息及软件和视频教程的文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关，您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。访问和下载本站内容，说明您已同意上述条款。本站为非盈利性站点，本站不贩卖软件，所有内容不作为商业行为。

THE END