新年为博客网站加2个春节快乐灯笼挂件

为博客加2个CSS写的灯笼，原代码来自知更鸟(鸟叔)，这里改了一下，放在两边，字体加缩小了能放下两个字，还有灯笼线，还有手机端不显示。

教程：把html代码放到主题页脚文件(footer.php)，</body>前面，然后到CSS样式代码放在后台外观，自定义里的额外CSS里面，begin主题的话可直接放在主题选项里的定制样式的css里即可。

html代码

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>
9. <div class="shui shui-b"></div>
10. <div class="shui shui-c"></div>
11. </div>
12. </div>
13. <!-- 灯笼 2 -->
14. <div class="deng-box1">
15. <div class="deng">
16. <div class="xian"></div>
17. <div class="deng-a">
18. <div class="deng-b"><div class="deng-t">快乐</div></div>
19. </div>
20. <div class="shui shui-a"></div>
21. <div class="shui shui-b"></div>
22. <div class="shui shui-c"></div>
23. </div>
24. </div>

CSS代码

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