网页装饰代码之给您的网站添加添加四个新年快乐灯笼特效

效果图

直接把下面的代码，粘贴到您网站</body>标签前面

1.     <!--灯笼开始 -->
   
2. <div class="deng-box2">
   
3. 
   
4.     <div class="deng">
   
5. 
   
6.         <div class="xian">
   
7. 
   
8.         </div>
   
9. 
   
10.         <div class="deng-a">
    
11. 
    
12.             <div class="deng-b">
    
13. 
    
14.                 <div class="deng-t">年</div>
    
15. 
    
16.             </div>
    
17. 
    
18.         </div>
    
19. 
    
20.         <div class="shui shui-a">
    
21. 
    
22.             <div class="shui-c">
    
23. 
    
24.             </div>
    
25. 
    
26.             <div class="shui-b"></div>
    
27. 
    
28.         </div>
    
29. 
    
30.     </div>
    
31. 
    
32. </div>
    
33. 
    
34. <div class="deng-box3">
    
35. 
    
36.     <div class="deng">
    
37. 
    
38.         <div class="xian">
    
39. 
    
40.         </div>
    
41. 
    
42.         <div class="deng-a">
    
43. 
    
44.             <div class="deng-b">
    
45. 
    
46.                 <div class="deng-t">新</div>
    
47. 
    
48.             </div>
    
49. 
    
50.         </div>
    
51. 
    
52.         <div class="shui shui-a">
    
53. 
    
54.             <div class="shui-c"></div>
    
55. 
    
56.             <div class="shui-b">
    
57. 
    
58.             </div>
    
59. 
    
60.         </div>
    
61. 
    
62.     </div>
    
63. 
    
64. </div>
    
65. 
    
66. <div class="deng-box1">
    
67. 
    
68.     <div class="deng">
    
69. 
    
70.         <div class="xian">
    
71. 
    
72.         </div>
    
73. 
    
74.         <div class="deng-a">
    
75. 
    
76.             <div class="deng-b">
    
77. 
    
78.                 <div class="deng-t">乐</div>
    
79. 
    
80.             </div>
    
81. 
    
82.         </div>
    
83. 
    
84.         <div class="shui shui-a">
    
85. 
    
86.             <div class="shui-c"></div>
    
87. 
    
88.             <div class="shui-b"></div>
    
89. 
    
90.         </div>
    
91. 
    
92.     </div>
    
93. 
    
94. </div>
    
95. 
    
96. <div class="deng-box">
    
97. 
    
98.     <div class="deng">
    
99. 
    
100.         <div class="xian">
     
101. 
     
102.         </div>
     
103. 
     
104.         <div class="deng-a">
     
105. 
     
106.             <div class="deng-b">
     
107. 
     
108.                 <div class="deng-t">快</div>
     
109. 
     
110.             </div>
     
111. 
     
112.         </div>
     
113. 
     
114.         <div class="shui shui-a">
     
115. 
     
116.             <div class="shui-c">
     
117. 
     
118.             </div>
     
119. 
     
120.             <div class="shui-b"></div>
     
121. 
     
122.         </div>
     
123. 
     
124.     </div>
     
125. 
     
126. </div>
     
127. 
     
128. <style type="text/css">
     
129. 
     
130.     .deng-box {
     
131. 
     
132.         position: fixed;
     
133. 
     
134.         top: -40px;
     
135. 
     
136.         right: 150px;
     
137. 
     
138.         z-index: 9999;
     
139. 
     
140.         pointer-events: none;
     
141. 
     
142.     }
     
143. 
     
144.     .deng-box1 {
     
145. 
     
146.         position: fixed;
     
147. 
     
148.         top: -30px;
     
149. 
     
150.         right: 10px;
     
151. 
     
152.         z-index: 9999;
     
153. 
     
154.         pointer-events: none
     
155. 
     
156.     }
     
157. 
     
158.     .deng-box2 {
     
159. 
     
160.         position: fixed;
     
161. 
     
162.         top: -40px;
     
163. 
     
164.         left: 150px;
     
165. 
     
166.         z-index: 9999;
     
167. 
     
168.         pointer-events: none
     
169. 
     
170.     }
     
171. 
     
172.     .deng-box3 {
     
173. 
     
174.         position: fixed;
     
175. 
     
176.         top: -30px;
     
177. 
     
178.         left: 10px;
     
179. 
     
180.         z-index: 9999;
     
181. 
     
182.         pointer-events: none
     
183. 
     
184.     }
     
185. 
     
186.     .deng-box1 .deng,
     
187. 
     
188.     .deng-box3 .deng {
     
189. 
     
190.         position: relative;
     
191. 
     
192.         width: 120px;
     
193. 
     
194.         height: 90px;
     
195. 
     
196.         margin: 50px;
     
197. 
     
198.         background: #d8000f;
     
199. 
     
200.         background: rgba(216, 0, 15, .8);
     
201. 
     
202.         border-radius: 50% 50%;
     
203. 
     
204.         -webkit-transform-origin: 50% -100px;
     
205. 
     
206.         -webkit-animation: swing 5s infinite ease-in-out;
     
207. 
     
208.         box-shadow: -5px 5px 30px 4px #fc903d
     
209. 
     
210.     }
     
211. 
     
212.     .deng {
     
213. 
     
214.         position: relative;
     
215. 
     
216.         width: 120px;
     
217. 
     
218.         height: 90px;
     
219. 
     
220.         margin: 50px;
     
221. 
     
222.         background: #d8000f;
     
223. 
     
224.         background: rgba(216, 0, 15, .8);
     
225. 
     
226.         border-radius: 50% 50%;
     
227. 
     
228.         -webkit-transform-origin: 50% -100px;
     
229. 
     
230.         -webkit-animation: swing 3s infinite ease-in-out;
     
231. 
     
232.         box-shadow: -5px 5px 50px 4px #fa6c00
     
233. 
     
234.     }
     
235. 
     
236.     .deng-a {
     
237. 
     
238.         width: 100px;
     
239. 
     
240.         height: 90px;
     
241. 
     
242.         background: #d8000f;
     
243. 
     
244.         background: rgba(216, 0, 15, .1);
     
245. 
     
246.         margin: 12px 8px 8px 8px;
     
247. 
     
248.         border-radius: 50% 50%;
     
249. 
     
250.         border: 2px solid #dc8f03
     
251. 
     
252.     }
     
253. 
     
254.     .deng-b {
     
255. 
     
256.         width: 45px;
     
257. 
     
258.         height: 90px;
     
259. 
     
260.         background: #d8000f;
     
261. 
     
262.         background: rgba(216, 0, 15, .1);
     
263. 
     
264.         margin: -4px 8px 8px 26px;
     
265. 
     
266.         border-radius: 50% 50%;
     
267. 
     
268.         border: 2px solid #dc8f03
     
269. 
     
270.     }
     
271. 
     
272.     .xian {
     
273. 
     
274.         position: absolute;
     
275. 
     
276.         top: -20px;
     
277. 
     
278.         left: 60px;
     
279. 
     
280.         width: 2px;
     
281. 
     
282.         height: 20px;
     
283. 
     
284.         background: #dc8f03
     
285. 
     
286.     }
     
287. 
     
288.     .shui-a {
     
289. 
     
290.         position: relative;
     
291. 
     
292.         width: 5px;
     
293. 
     
294.         height: 20px;
     
295. 
     
296.         margin: -5px 0 0 59px;
     
297. 
     
298.         -webkit-animation: swing 4s infinite ease-in-out;
     
299. 
     
300.         -webkit-transform-origin: 50% -45px;
     
301. 
     
302.         background: orange;
     
303. 
     
304.         border-radius: 0 0 5px 5px
     
305. 
     
306.     }
     
307. 
     
308.     .shui-b {
     
309. 
     
310.         position: absolute;
     
311. 
     
312.         top: 14px;
     
313. 
     
314.         left: -2px;
     
315. 
     
316.         width: 10px;
     
317. 
     
318.         height: 10px;
     
319. 
     
320.         background: #dc8f03;
     
321. 
     
322.         border-radius: 50%
     
323. 
     
324.     }
     
325. 
     
326.     .shui-c {
     
327. 
     
328.         position: absolute;
     
329. 
     
330.         top: 18px;
     
331. 
     
332.         left: -2px;
     
333. 
     
334.         width: 10px;
     
335. 
     
336.         height: 35px;
     
337. 
     
338.         background: orange;
     
339. 
     
340.         border-radius: 0 0 0 5px
     
341. 
     
342.     }
     
343. 
     
344.     .deng:before {
     
345. 
     
346.         position: absolute;
     
347. 
     
348.         top: -7px;
     
349. 
     
350.         left: 29px;
     
351. 
     
352.         height: 12px;
     
353. 
     
354.         width: 60px;
     
355. 
     
356.         content: " ";
     
357. 
     
358.         display: block;
     
359. 
     
360.         z-index: 999;
     
361. 
     
362.         border-radius: 5px 5px 0 0;
     
363. 
     
364.         border: solid 1px #dc8f03;
     
365. 
     
366.         background: orange;
     
367. 
     
368.         background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
     
369. 
     
370.     }
     
371. 
     
372.     .deng:after {
     
373. 
     
374.         position: absolute;
     
375. 
     
376.         bottom: -7px;
     
377. 
     
378.         left: 10px;
     
379. 
     
380.         height: 12px;
     
381. 
     
382.         width: 60px;
     
383. 
     
384.         content: " ";
     
385. 
     
386.         display: block;
     
387. 
     
388.         margin-left: 20px;
     
389. 
     
390.         border-radius: 0 0 5px 5px;
     
391. 
     
392.         border: solid 1px #dc8f03;
     
393. 
     
394.         background: orange;
     
395. 
     
396.         background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
     
397. 
     
398.     }
     
399. 
     
400.     .deng-t {
     
401. 
     
402.         font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;
     
403. 
     
404.         font-size: 3.2rem;
     
405. 
     
406.         color: #dc8f03;
     
407. 
     
408.         font-weight: 700;
     
409. 
     
410.         line-height: 85px;
     
411. 
     
412.         text-align: center
     
413. 
     
414.     }
     
415. 
     
416.     .night .deng-box,
     
417. 
     
418.     .night .deng-box1,
     
419. 
     
420.     .night .deng-t {
     
421. 
     
422.         background: 0 0 !important
     
423. 
     
424.     }
     
425. 
     
426.     @-moz-keyframes swing {
     
427. 
     
428.         0% {
     
429. 
     
430.             -moz-transform: rotate(-10deg)
     
431. 
     
432.         }
     
433. 
     
434.         50% {
     
435. 
     
436.             -moz-transform: rotate(10deg)
     
437. 
     
438.         }
     
439. 
     
440.         100% {
     
441. 
     
442.             -moz-transform: rotate(-10deg)
     
443. 
     
444.         }
     
445. 
     
446.     }
     
447. 
     
448.     @-webkit-keyframes swing {
     
449. 
     
450.         0% {
     
451. 
     
452.             -webkit-transform: rotate(-10deg)
     
453. 
     
454.         }
     
455. 
     
456.         50% {
     
457. 
     
458.             -webkit-transform: rotate(10deg)
     
459. 
     
460.         }
     
461. 
     
462.         100% {
     
463. 
     
464.             -webkit-transform: rotate(-10deg)
     
465. 
     
466.         }
     
467. 
     
468.     }
     
469. 
     
470. </style>
     
471. <!--灯笼结束 -->

复制代码