前两天分享了一个为wordpress主题添加花瓣飘落的特效，今天再来分享一个为wordpress主题添加大红灯笼的特效，可以让你的博客在过年的时候节日氛围更浓。此特效同样出自知更鸟，是CSS3动画的简单应用，纯HTML+CSS手敲出来的。在文章最后有代码文件的压缩包下载及具体使用方法。

点击下图查看动画效果

第一步、添加HTML代码

添加如下 HTML 代码到当前主题页脚模板 footer.php 中的 <?php wp_footer(); ?> 标签上面。

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>
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.     rightright: -20px;
5.     z-index: 999;
6. }
8. .deng-box1 {
9.     position: fixed;
10.     top: -30px;
11.     rightright: 10px;
12.     z-index: 999;
13. }
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. }
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. }
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. }
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. }
61. .xian {
62.     position: absolute;
63.     top: -20px;
64.     left: 60px;
65.     width: 2px;
66.     height: 20px;
67.     background: #dc8f03;
68. }
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. }
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. }
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. }
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 rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
114. }
116. .deng:after {
117.     position: absolute;
118.     bottombottom: -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 rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
129. }
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. }
140. .night .deng-t,
141. .night .deng-box,
142. .night .deng-box1 {
143.     background: transparent !important;
144. }
146. @-moz-keyframes swing {
147.     0% {
148.         -moz-transform: rotate(-10deg)
149.     }
151.     50% {
152.         -moz-transform: rotate(10deg)
153.     }
155.     100% {
156.         -moz-transform: rotate(-10deg)
157.     }
158. }
160. @-webkit-keyframes swing {
161.     0% {
162.         -webkit-transform: rotate(-10deg)
163.     }
165.     50% {
166.         -webkit-transform: rotate(10deg)
167.     }
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 } ?>

如果不想在手机等移动端显示，可将下列代码添加到页脚模板 <?php wp_footer(); ?> 标签的上面。

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

原文：https://zmingcx.com/hanging-lantern.html

推荐阅读：
Applicable Accounting Software For Churches　 How to Balance a Binary Search Tree using Recursive Inorder Trav　 Finding the Lucky Numbers in a Matrix　 Factory Design Pattern in Object Oriented Design Programming　 Algorithm to Find Minimum Removals to Make Valid Parentheses　 Greedy Algorithm to Validate Stack Sequences　 Why is Web Hosting Important for Bloggers?　 How to Write More Local Content (and Why You Should)　 8 Ways To Monetize Your Blog Without Driving Away Visitors/Users　 5 Ways Bloggers Can Find Marketing Inspiration