过年啦，挂灯笼！

过年挂灯笼是中国的一个习俗，家里挂灯笼，博客也是自己的家，当然也要挂一个了。很多年前Flash流行时，网上可以随便找一个Flash动画的灯笼，很方便就可以加到网站主题模板上，如今Flash已成过眼云烟，在国内甚至已变成流氓插件，网上找了找没有合适CSS3动画灯笼，那就自己写一个吧，效果如图。

代码这里也分享一下，有喜欢的朋友拿去用，将灯笼挂在自己的博客上，增加点过年的气氛。

这个灯笼只是简单应用一下CSS3动画，纯HTML+CSS手敲出来的，由于时间短写的不是很严谨，但不影响使用，具体实现方法，文章最后有打包文件下载。

第一步、添加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>

因为代码中有中文，编辑后需要将模板文件保存为UTF-8 无BOM（无签名）的格式，后台主题编辑中修改可以忽略，上面的代码可以只加一个，个人感觉挂两个灯笼更灵动些。

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

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

第二步、添加样式

将样式代码添加到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. }

也可以将样式代码直接加到主题样式文件style.css的最后。可能灯笼上的文字字号在有些主题上有点大，可以适当修改第133行的字号：font-size: 3.2rem;

打包文件下载

使用方法：

第一步，解压后将deng.php文件上传到当前主题根目录中。

第二步，打开当前主题页脚模板footer.php，在<?php wp_footer(); ?>上面添加：

1. <?php require get_template_directory() . ‘/deng.php’; ?>

添加判断函数

如果只想在首页显示灯笼，可以用下面的判断语句把上面的代码包裹起来：

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

手机移动端不显示：

1. <?php if (!wp_is_mobile()) { ?>
2. <?php require get_template_directory() . ‘/deng.php’; ?>
3. <?php } ?>

提示：加显示判断函数，代码必须添加在页脚模板<?php wp_footer(); ?>函数上面，否则无效。

这里也提前预祝大家春节快乐，万事如意，鼠年吉祥！