春节中国风灯笼挂饰代码

1. <!-- 灯笼1 -->
   
2. 
   
3. <div class="deng-box">
   
4. 
   
5. <div class="deng">
   
6. 
   
7. <div class="xian"></div>
   
8. 
   
9. <div class="deng-a">
   
10. 
    
11. <div class="deng-b"><div class="deng-t">节</div></div>
    
12. 
    
13. </div>
    
14. 
    
15. <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    
16. 
    
17. </div>
    
18. 
    
19. </div>
    
20. 
    
21. 
    
22. 
    
23. <!-- 灯笼2 -->
    
24. 
    
25. <div class="deng-box1">
    
26. 
    
27. <div class="deng">
    
28. 
    
29. <div class="xian"></div>
    
30. 
    
31. <div class="deng-a">
    
32. 
    
33. <div class="deng-b"><div class="deng-t">春</div></div>
    
34. 
    
35. </div>
    
36. 
    
37. <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    
38. 
    
39. </div>
    
40. 
    
41. </div>
    
42. 
    
43. <style>
    
44. 
    
45. .deng-box {
    
46. 
    
47. position: fixed;
    
48. 
    
49. top: -40px;
    
50. 
    
51. right: -20px;
    
52. 
    
53. z-index: 9999;
    
54. 
    
55. pointer-events: none;
    
56. 
    
57. }
    
58. 
    
59. 
    
60. 
    
61. .deng-box1 {
    
62. 
    
63. position: fixed;
    
64. 
    
65. top: -30px;
    
66. 
    
67. right: 10px;
    
68. 
    
69. z-index: 9999;
    
70. 
    
71. pointer-events: none;
    
72. 
    
73. }
    
74. 
    
75. .deng-box1 .deng {
    
76. 
    
77. position: relative;
    
78. 
    
79. width: 120px;
    
80. 
    
81. height: 90px;
    
82. 
    
83. margin: 50px;
    
84. 
    
85. background: #d8000f;
    
86. 
    
87. background: rgba(216, 0, 15, 0.8);
    
88. 
    
89. border-radius: 50% 50%;
    
90. 
    
91. -webkit-transform-origin: 50% -100px;
    
92. 
    
93. -webkit-animation: swing 5s infinite ease-in-out;
    
94. 
    
95. box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
    
96. 
    
97. }
    
98. 
    
99. .deng {
    
100. 
     
101. position: relative;
     
102. 
     
103. width: 120px;
     
104. 
     
105. height: 90px;
     
106. 
     
107. margin: 50px;
     
108. 
     
109. background: #d8000f;
     
110. 
     
111. background: rgba(216, 0, 15, 0.8);
     
112. 
     
113. border-radius: 50% 50%;
     
114. 
     
115. -webkit-transform-origin: 50% -100px;
     
116. 
     
117. -webkit-animation: swing 3s infinite ease-in-out;
     
118. 
     
119. box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
     
120. 
     
121. }
     
122. 
     
123. .deng-a {
     
124. 
     
125. width: 100px;
     
126. 
     
127. height: 90px;
     
128. 
     
129. background: #d8000f;
     
130. 
     
131. background: rgba(216, 0, 15, 0.1);
     
132. 
     
133. margin: 12px 8px 8px 10px;
     
134. 
     
135. border-radius: 50% 50%;
     
136. 
     
137. border: 2px solid #dc8f03;
     
138. 
     
139. }
     
140. 
     
141. .deng-b {
     
142. 
     
143. width: 45px;
     
144. 
     
145. height: 90px;
     
146. 
     
147. background: #d8000f;
     
148. 
     
149. background: rgba(216, 0, 15, 0.1);
     
150. 
     
151. margin: -2px 8px 8px 26px;
     
152. 
     
153. border-radius: 50% 50%;
     
154. 
     
155. border: 2px solid #dc8f03;
     
156. 
     
157. }
     
158. 
     
159. .xian {
     
160. 
     
161. position: absolute;
     
162. 
     
163. top: -20px;
     
164. 
     
165. left: 60px;
     
166. 
     
167. width: 2px;
     
168. 
     
169. height: 20px;
     
170. 
     
171. background: #dc8f03;
     
172. 
     
173. }
     
174. 
     
175. .shui-a {
     
176. 
     
177. position: relative;
     
178. 
     
179. width: 5px;
     
180. 
     
181. height: 20px;
     
182. 
     
183. margin: -5px 0 0 59px;
     
184. 
     
185. -webkit-animation: swing 4s infinite ease-in-out;
     
186. 
     
187. -webkit-transform-origin: 50% -45px;
     
188. 
     
189. background: #ffa500;
     
190. 
     
191. border-radius: 0 0 5px 5px;
     
192. 
     
193. }
     
194. 
     
195. .shui-b {
     
196. 
     
197. position: absolute;
     
198. 
     
199. top: 14px;
     
200. 
     
201. left: -2px;
     
202. 
     
203. width: 10px;
     
204. 
     
205. height: 10px;
     
206. 
     
207. background: #dc8f03;
     
208. 
     
209. border-radius: 50%;
     
210. 
     
211. }
     
212. 
     
213. .shui-c {
     
214. 
     
215. position: absolute;
     
216. 
     
217. top: 18px;
     
218. 
     
219. left: -2px;
     
220. 
     
221. width: 10px;
     
222. 
     
223. height: 35px;
     
224. 
     
225. background: #ffa500;
     
226. 
     
227. border-radius: 0 0 0 5px;
     
228. 
     
229. }
     
230. 
     
231. .deng:before {
     
232. 
     
233. position: absolute;
     
234. 
     
235. top: -7px;
     
236. 
     
237. left: 29px;
     
238. 
     
239. height: 12px;
     
240. 
     
241. width: 60px;
     
242. 
     
243. content: " ";
     
244. 
     
245. display: block;
     
246. 
     
247. z-index: 999;
     
248. 
     
249. border-radius: 5px 5px 0 0;
     
250. 
     
251. border: solid 1px #dc8f03;
     
252. 
     
253. background: #ffa500;
     
254. 
     
255. background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
     
256. 
     
257. }
     
258. 
     
259. .deng:after {
     
260. 
     
261. position: absolute;
     
262. 
     
263. bottom: -7px;
     
264. 
     
265. left: 10px;
     
266. 
     
267. height: 12px;
     
268. 
     
269. width: 60px;
     
270. 
     
271. content: " ";
     
272. 
     
273. display: block;
     
274. 
     
275. margin-left: 20px;
     
276. 
     
277. border-radius: 0 0 5px 5px;
     
278. 
     
279. border: solid 1px #dc8f03;
     
280. 
     
281. background: #ffa500;
     
282. 
     
283. background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
     
284. 
     
285. }
     
286. 
     
287. .deng-t {
     
288. 
     
289. font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
     
290. 
     
291. font-size: 3.2rem;
     
292. 
     
293. color: #dc8f03;
     
294. 
     
295. font-weight: bold;
     
296. 
     
297. line-height: 85px;
     
298. 
     
299. text-align: center;
     
300. 
     
301. }
     
302. 
     
303. .night .deng-t,
     
304. 
     
305. .night .deng-box,
     
306. 
     
307. .night .deng-box1 {
     
308. 
     
309. background: transparent !important;
     
310. 
     
311. }
     
312. 
     
313. @-moz-keyframes swing {
     
314. 
     
315. 0% {
     
316. 
     
317. -moz-transform: rotate(-10deg)
     
318. 
     
319. }
     
320. 
     
321. 50% {
     
322. 
     
323. -moz-transform: rotate(10deg)
     
324. 
     
325. }
     
326. 
     
327. 
     
328. 
     
329. 100% {
     
330. 
     
331. -moz-transform: rotate(-10deg)
     
332. 
     
333. }
     
334. 
     
335. }
     
336. 
     
337. @-webkit-keyframes swing {
     
338. 
     
339. 0% {
     
340. 
     
341. -webkit-transform: rotate(-10deg)
     
342. 
     
343. }
     
344. 
     
345. 50% {
     
346. 
     
347. -webkit-transform: rotate(10deg)
     
348. 
     
349. }
     
350. 
     
351. 100% {
     
352. 
     
353. -webkit-transform: rotate(-10deg)
     
354. 
     
355. }
     
356. 
     
357. }
     
358. 
     
359. </style>

复制代码