最新公告

为网站添加春节灯笼动态特效（附代码下载）

作者 : admin 本文共7865个字，预计阅读时间需要20分钟 发布时间： 2020-05-8 共156人阅读

2020春节将至，做为站长管理员，让网站也挂上灯笼为网站添加点喜庆的气氛。

为大家分享个福利，为你的网站添加春节灯笼动态特效代码，效果见本站右上角。

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

为网站添加春节灯笼动态特效（附代码下载）
为网站添加春节灯笼动态特效（附代码下载）

第一步、添加HTML代码

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

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

因为代码中有中文，编辑后需要将模板文件保存为UTF-8 无BOM（无签名）的格式，后台主题编辑中修改可以忽略，上面的代码可以只加一个，个人感觉挂两个灯笼更灵动些。如果只想在首页显示灯笼，可以用下面的判断语句把HTML代码包裹起来。

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

第二步、添加CSS样式

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

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

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

懒人版本  Wordpress博客打包版

如果你是wordpress博客程序，可以使用PHP文件形式，简单方便，尽情折腾吧。

使用方法如下：

第一步，新建并编辑deng.php文件上传到当前主题根目录中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<?php
if ( ! defined( ‘ABSPATH’ ) ) { exit; }
// 封装代码
function deng() { ?>
<!— 灯笼1 —>
<div class=“deng-box”>
<div class=“deng”>
<div class=“xian”></div>
<div class=“deng-a”>
<div class=“deng-b”><div class=“deng-t”>节</div></div>
</div>
<div class=“shui shui-a”><div class=“shui-c”></div><div class=“shui-b”></div></div>
</div>
</div>
<!— 灯笼2 —>
<div class=“deng-box1”>
<div class=“deng”>
<div class=“xian”></div>
<div class=“deng-a”>
<div class=“deng-b”><div class=“deng-t”>春</div></div>
</div>
<div class=“shui shui-a”><div class=“shui-c”></div><div class=“shui-b”></div></div>
</div>
</div>
<style>
.deng-box {
position: fixed;
top: -40px;
right: -20px;
z-index: 9999;
pointer-events: none;
}
.deng-box1 {
position: fixed;
top: -30px;
right: 10px;
z-index: 9999;
pointer-events: none;
}
.deng-box1 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 8px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-b {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -4px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}
.shui-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.deng:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: ” “;
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: ” “;
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
font-size: 3.2rem;
color: #dc8f03;
font-weight: bold;
line-height: 85px;
text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
background: transparent !important;
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg)
}
50% {
-moz-transform: rotate(10deg)
}
100% {
-moz-transform: rotate(-10deg)
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg)
}
50% {
-webkit-transform: rotate(10deg)
}
100% {
-webkit-transform: rotate(-10deg)
}
}
</style>
<?php }
/** 将代码绑定到页脚 **/
add_action( ‘wp_footer’, ‘deng’, 100 );

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

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

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

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

好了，上面两种方法都可以实现灯宠特效，如果你愿意折腾，可以尝试一下。（小白注意，不懂代码不要乱添加，出现网站错位变形请立即恢复还原，本站不承担后果）

1. 本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解！如有侵权请邮件联系客服！4105897@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理，有奖励！
3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
4. 如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！

模板猫 » 为网站添加春节灯笼动态特效（附代码下载）

常见问题FAQ

免费下载或者贵宾会员专享资源能否直接商用？
本站所有资源版权均属于原作者所有，提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 《免责声明》。
点击下载链接不跳转怎么回事？
您好，QQ内打开是不跳转的，一少部分浏览器也不跳转，一般的UC了,搜狗 360等浏览器都可以跳转。
可以直接把资源发给我吗？
您好，付费资源可以直接把链接发送给您，免费资源不提供任何帮助，软件资源自测，或者请站长喝红牛！
admin

admin VIP

分享到：

发表评论

相关推荐

  • 593本站运营(天)
  • 45用户总数
  • 276资源数(个)
  • 0近7天更新(个)
  • 1000资源大小(GB)
立即查看