快春节了，给你的网站添加两个灯笼！

效果如图：

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

复制代码