#精品

WordPress博客新增春节红灯笼挂件

      春节将至！过年啦，挂灯笼！自己博客也是自己的家，迎接春节节日气氛！代码这里也分享一下，有喜欢的朋友拿去用，将灯笼挂在自己的博客上，增加点过年的气氛。

使用

截图

（单边红灯笼）下面有两边挂双侧灯笼教程！！！！！！

1.添加 HTML 代码

将下面的 HTML 代码添加到主题页脚模板 footer.php，</body>标签的上面。

1. <!– 灯笼 1 –>
2. <div class=“deng-box”>
3. <div class=“deng”>
4. <div class=“xian”></div>
5. <div class=“deng-a”>
6. <div class=“deng-b”><div class=“deng-t”>节</div></div>
7. </div>
8. <div class=“shui shui-a”><div class=“shui-c”></div><div class=“shui-b”></div></div>
9. </div>
10. </div>
11.  
12. <!– 灯笼 2 –>
13. <div class=“deng-box1”>
14. <div class=“deng”>
15. <div class=“xian”></div>
16. <div class=“deng-a”>
17. <div class=“deng-b”><div class=“deng-t”>春</div></div>
18. </div>
19. <div class=“shui shui-a”><div class=“shui-c”></div><div class=“shui-b”></div></div>
20. </div>
21. </div>

2.添加样式

将样式代码添加到 WP 后台 → 外观 → 自定义 → 额外 CSS 中，点击“发布”即可！

1. .deng–box {
2. position: fixed;
3. top: –40px;
4. right: –20px;
5. z–index: 999;
6. }
7.  
8. .deng–box1 {
9. position: fixed;
10. top: –30px;
11. right: 10px;
12. z–index: 999;
13. }
14.  
15. .deng–box1 .deng {
16. position: relative;
17. width: 120px;
18. height: 90px;
19. margin: 50px;
20. background: #d8000f;
21. background: rgba(216, 0, 15, 0.8);
22. border–radius: 50% 50%;
23. –webkit–transform–origin: 50% –100px;
24. –webkit–animation: swing 5s infinite ease–in–out;
25. box–shadow: –5px 5px 30px 4px rgba(252, 144, 61, 1);
26. }
27.  
28. .deng {
29. position: relative;
30. width: 120px;
31. height: 90px;
32. margin: 50px;
33. background: #d8000f;
34. background: rgba(216, 0, 15, 0.8);
35. border–radius: 50% 50%;
36. –webkit–transform–origin: 50% –100px;
37. –webkit–animation: swing 3s infinite ease–in–out;
38. box–shadow: –5px 5px 50px 4px rgba(250, 108, 0, 1);
39. }
40.  
41. .deng–a {
42. width: 100px;
43. height: 90px;
44. background: #d8000f;
45. background: rgba(216, 0, 15, 0.1);
46. margin: 12px 8px 8px 10px;
47. border–radius: 50% 50%;
48. border: 2px solid #dc8f03;
49. }
50.  
51. .deng–b {
52. width: 45px;
53. height: 90px;
54. background: #d8000f;
55. background: rgba(216, 0, 15, 0.1);
56. margin: –4px 8px 8px 26px;
57. border–radius: 50% 50%;
58. border: 2px solid #dc8f03;
59. }
60.  
61. .xian {
62. position: absolute;
63. top: –20px;
64. left: 60px;
65. width: 2px;
66. height: 20px;
67. background: #dc8f03;
68. }
69.  
70. .shui–a {
71. position: relative;
72. width: 5px;
73. height: 20px;
74. margin: –5px 0 0 59px;
75. –webkit–animation: swing 4s infinite ease–in–out;
76. –webkit–transform–origin: 50% –45px;
77. background: #ffa500;
78. border–radius: 0 0 5px 5px;
79. }
80.  
81. .shui–b {
82. position: absolute;
83. top: 14px;
84. left: –2px;
85. width: 10px;
86. height: 10px;
87. background: #dc8f03;
88. border–radius: 50%;
89. }
90.  
91. .shui–c {
92. position: absolute;
93. top: 18px;
94. left: –2px;
95. width: 10px;
96. height: 35px;
97. background: #ffa500;
98. border–radius: 0 0 0 5px;
99. }
100.  
101. .deng:before {
102. position: absolute;
103. top: –7px;
104. left: 29px;
105. height: 12px;
106. width: 60px;
107. content: ” “;
108. display: block;
109. z–index: 999;
110. border–radius: 5px 5px 0 0;
111. border: solid 1px #dc8f03;
112. background: #ffa500;
113. background: linear–gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
114. }
115.  
116. .deng:after {
117. position: absolute;
118. bottom: –7px;
119. left: 10px;
120. height: 12px;
121. width: 60px;
122. content: ” “;
123. display: block;
124. margin–left: 20px;
125. border–radius: 0 0 5px 5px;
126. border: solid 1px #dc8f03;
127. background: #ffa500;
128. background: linear–gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
129. }
130.  
131. .deng–t {
132. font–family: 华文行楷,Arial,Lucida Grande,Tahoma,sans–serif;
133. font–size: 3.2rem;
134. color: #dc8f03;
135. font–weight: bold;
136. line–height: 85px;
137. text–align: center;
138. }
139.  
140. .night .deng–t,
141. .night .deng–box,
142. .night .deng–box1 {
143. background: transparent !important;
144. }
145.  
146. @-moz–keyframes swing {
147. 0% {
148. –moz–transform: rotate(-10deg)
149. }
150.  
151. 50% {
152. –moz–transform: rotate(10deg)
153. }
154.  
155. 100% {
156. –moz–transform: rotate(-10deg)
157. }
158. }
159.  
160. @-webkit–keyframes swing {
161. 0% {
162. –webkit–transform: rotate(-10deg)
163. }
164.  
165. 50% {
166. –webkit–transform: rotate(10deg)
167. }
168.  
169. 100% {
170. –webkit–transform: rotate(-10deg)
171. }
172. }

(自行需求)如果只想在首页显示灯笼，可以用下面的判断语句把 HTML 代码包裹起来：

1. <?php if (is_home()) { ?>
2. <!– 代码放这里 –>
3. <?php } ?>

给自己网站两边挂上双侧大红灯笼

使用

截图

（双边红灯笼）

1.添加 HTML 代码

复制下面的代码到 footer.php，同之前的，</body>之前

1. <div class=“deng-box”>
2. <div class=“deng”>
3. <div class=“xian”></div>
4. <div class=“deng-a”>
5. <div class=“deng-b”><div class=“deng-t”>春节</div></div>
6. </div>
7. <div class=“shui shui-a”><div class=“shui-c”></div><div class=“shui-b”></div></div>
8. </div>
9. </div>
10.  
11. <div class=“deng-box1”>
12. <div class=“deng”>
13. <div class=“xian”></div>
14. <div class=“deng-a”>
15. <div class=“deng-b”><div class=“deng-t”>快乐</div></div>
16. </div>
17. <div class=“shui shui-a”><div class=“shui-c”></div><div class=“shui-b”></div></div>
18. </div>
19. </div>

2.将下面这个复制到 style.css 里面，WordPress 可以这样：自定义——额外 css，复制粘贴发布即可

1. .deng–box {
2. position: fixed;
3. top: –30px;
4. left: 220px;
5. z–index: 9999;
6. pointer–events: none;
7. }
9. .deng–box1 {
10. position: fixed;
11. top: –30px;
12. right: 222px;
13. z–index: 9999;
14. pointer–events: none;
15. }
16.  
17. .deng–box1 .deng {
18. position: relative;
19. width: 120px;
20. height: 90px;
21. margin: 50px;
22. background: #d8000f;
23. background: rgba(216, 0, 15, 0.8);
24. border–radius: 50% 50%;
25. –webkit–transform–origin: 50% –100px;
26. –webkit–animation: swing 5s infinite ease–in–out;
27. box–shadow: –5px 5px 30px 4px rgba(252, 144, 61, 1);
28. }
29.  
30. .deng {
31. position: relative;
32. width: 120px;
33. height: 90px;
34. margin: 50px;
35. background: #d8000f;
36. background: rgba(216, 0, 15, 0.8);
37. border–radius: 50% 50%;
38. –webkit–transform–origin: 50% –100px;
39. –webkit–animation: swing 3s infinite ease–in–out;
40. box–shadow: –5px 5px 50px 4px rgba(250, 108, 0, 1);
41. }
42.  
43. .deng–a {
44. width: 100px;
45. height: 90px;
46. background: #d8000f;
47. background: rgba(216, 0, 15, 0.1);
48. margin: 12px 8px 8px 10px;
49. border–radius: 50% 50%;
50. border: 2px solid #dc8f03;
51. }
52.  
53. .deng–b {
54. width: 45px;
55. height: 90px;
56. background: #d8000f;
57. background: rgba(216, 0, 15, 0.1);
58. margin: –2px 8px 8px 26px;
59. border–radius: 50% 50%;
60. border: 2px solid #dc8f03;
61. }
62.  
63. .xian {
64. position: absolute;
65. top: –20px;
66. left: 60px;
67. width: 2px;
68. height: 20px;
69. background: #dc8f03;
70. }
71.  
72. .shui–a {
73. position: relative;
74. width: 5px;
75. height: 20px;
76. margin: –5px 0 0 59px;
77. –webkit–animation: swing 4s infinite ease–in–out;
78. –webkit–transform–origin: 50% –45px;
79. background: #ffa500;
80. border–radius: 0 0 5px 5px;
81. }
82.  
83. .shui–b {
84. position: absolute;
85. top: 14px;
86. left: –2px;
87. width: 10px;
88. height: 10px;
89. background: #dc8f03;
90. border–radius: 50%;
91. }
92.  
93. .shui–c {
94. position: absolute;
95. top: 18px;
96. left: –2px;
97. width: 10px;
98. height: 35px;
99. background: #ffa500;
100. border–radius: 0 0 0 5px;
101. }
102.  
103. .deng:before {
104. position: absolute;
105. top: –7px;
106. left: 29px;
107. height: 12px;
108. width: 60px;
109. content: ” “;
110. display: block;
111. z–index: 999;
112. border–radius: 5px 5px 0 0;
113. border: solid 1px #dc8f03;
114. background: #ffa500;
115. background: linear–gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
116. }
117.  
118. .deng:after {
119. position: absolute;
120. bottom: –7px;
121. left: 10px;
122. height: 12px;
123. width: 60px;
124. content: ” “;
125. display: block;
126. margin–left: 20px;
127. border–radius: 0 0 5px 5px;
128. border: solid 1px #dc8f03;
129. background: #ffa500;
130. background: linear–gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
131. }
132.  
133. .deng–t {
134. font–family: 华文行楷,Arial,Lucida Grande,Tahoma,sans–serif;
135. font–size: 1.5rem;
136. color: #ffa500;
137. font–weight: bold;
138. line–height: 42px;
139. text–align: center;
140. width: 25px;
141. margin: 0 auto;
143. }
144.  
145. .night .deng–t,
146. .night .deng–box,
147. .night .deng–box1 {
148. background: transparent !important;
149. }
150.  
151. @-moz–keyframes swing {
152. 0% {
153. –moz–transform: rotate(-10deg)
154. }
155.  
156. 50% {
157. –moz–transform: rotate(10deg)
158. }
160. 100% {
161. –moz–transform: rotate(-10deg)
162. }
163. }
164.  
165. @-webkit–keyframes swing {
166. 0% {
167. –webkit–transform: rotate(-10deg)
168. }
169.  
170. 50% {
171. –webkit–transform: rotate(10deg)
172. }
173.  
174. 100% {
175. –webkit–transform: rotate(-10deg)
176. }
177. }

（自行需求）不想在手机端显示，将这串代码复制加到上面 CSS 后面即可！

1. @media (max–width: 678px){.deng–box{display:none;}}
2. @media (max–width: 678px){.deng–box1{display:none;}}

转载请注明：汇站网 » WordPress 博客新增春节红灯笼挂件