博客网站顶部增加一排小桔灯代码

非常喜庆个性的一个美化，有点非常的闪亮，不是一般人都能接受的，默认出现时间为晚8点到早8点，距离顶部为50px；可以根据自己的需求修改。配合网站每天自动夜间模式效果非常好。

使用教程：

以Wordpress为例把下面的代码加入到主题目录下function.php中

1. add_filter('wp_footer', 'add_lu_xiaojudeng');
2. function add_lu_xiaojudeng() {
3. date_default_timezone_set(银行卡Asia/Shanghai银行卡);
4. $curTime = date(银行卡Y-m-d H:i:s银行卡,time());
5. $stimestamp = date(银行卡Y-m-d H:i:s银行卡,mktime(8,0,0,date(银行卡m银行卡),date(银行卡d银行卡),date(银行卡Y银行卡))); //早上8点。
6. $etimestamp = date(银行卡Y-m-d H:i:s银行卡,mktime(20,0,0,date(银行卡m银行卡),date(银行卡d银行卡),date(银行卡Y银行卡))); //晚上8点。
7. if(($curTime >= $stimestamp & $curTime <=$etimestamp)== false){
8. echo'
9. <div id=银行卡xiaojudeng银行卡>
10. </div>
11. <script type=银行卡text/javascript银行卡>
12. var con = document.getElementById(银行卡xiaojudeng银行卡);
13. var width=document.body.clientWidth;
14. var j = Math.ceil(width/15) + 1;
15. for(var i=0; i<=j; i++){
16. var crli = document.createElement(银行卡li银行卡);
17. con.appendChild(crli);
18. }
19. </script>';
20. }
21. }

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

1. #xiaojudeng{
2. position: fixed;
3. z-index: 999;
4. top: 50px; //到顶部的距离。
5. pointer-events: none;
6. width: 100%;
7. height: 120px;
8. white-space: nowrap;
9. overflow: hidden;
10. }
11. #xiaojudeng li{
12. display: inline-block;
13. margin-top: 15px;
14. margin-right: 50px;
15. width: 15px;
16. height: 30px;
17. border-radius: 50%;
18. position: relative;
19. }
20. #xiaojudeng li::after{
21. content: '';
22. position: absolute;
23. top: -5px;
24. left: 50%;
25. transform: translateX(-50%);
26. width: 20px;
27. height: 12px;
28. background-color: #727472;
29. box-shadow: inset 0 0 3px #c3c3bd;
30. border-radius: 10px;
31.  
32. }
33. #xiaojudeng li::before{
34. content: '';
35. position: absolute;
36. top: -23px;
37. left: 15px;
38. width: 55px;
39. height: 30px;
40. border-bottom: 3px solid #e7e7e7;
41. border-radius: 50%;
42. }
43. #xiaojudeng li:nth-of-type(2n+1){
44. animation: lan 2s infinite;
45. }#xiaojudeng li:nth-child(2n+2){
46. animation: huang 2.2s infinite;
47. }#xiaojudeng li:nth-child(3n+3){
48. animation: zhi 1.8s infinite;
49. }
50. #xiaojudeng li:nth-child(4n+4){
51. animation: lv 2.8s infinite;
52. }
53.  
54. @keyframes lan{
55. 0%,100%{
56. background-color: rgba(4, 255, 242, 0.5);
57. }
58. 50%{
59. background-color: rgb(4, 255, 242);
60. box-shadow: 0 0 10px rgb(4, 255, 242),
61. 0 0 30px rgb(4, 255, 242),
62. 0 0 50px rgb(4, 255, 242);
63. }
64. }
65. @keyframes huang{
66. 0%,100%{
67. background-color: rgba(251, 255, 4,.5);
68. }
69. 50%{
70. background-color: rgb(251, 255, 4);
71. box-shadow: 0 0 10px rgb(251, 255, 4),
72. 0 0 12px rgb(251, 255, 4),
73. 0 0 30px rgb(251, 255, 4);
74. }
75. }
76. @keyframes lv{
77. 0%,100%{
78. background-color: rgba(33, 255, 4,.5);
79. }
80. 50%{
81. background-color: rgb(33, 255, 4);
82. box-shadow: 0 0 10px rgb(33, 255, 4),
83. 0 0 12px rgb(33, 255, 4),
84. 0 0 30px rgb(33, 255, 4);
85. }
86. }
87. @keyframes zhi{
88. 0%,100%{
89. background-color: rgba(255, 4, 255,.5);
90. }
91. 50%{
92. background-color: rgb(255, 4, 255);
93. box-shadow: 0 0 10px rgb(255, 4, 255),
94. 0 0 25px rgb(255, 4, 255),
95. 0 0 40px rgb(255, 4, 255);
96. }
97. }