前两天分享了一个为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

推荐阅读：
台湾卫视中文台直播-亚洲卫视中文网「高清」　 卫视体育台2在线直播「高清」　 卫视国际电影台直播_星空卫视电影台直播「高清」　 台湾三立新闻台直播「高清」　 台湾年代新闻台直播「高清」　 台湾非凡新闻台直播「高清」　 耀才财经台直播「流畅」　 香港亚太第一卫视ONE-TV直播　 凤凰卫视电影台直播_凤凰电影台直播观看　 TVB无线财经·资讯台直播观看【高清】