2021春节代码：代码插入到任意footer或首页位置

foxcat

2021春节马上到来

快来给你的网站加个喜庆的灯笼迎接春节吧

如图所示在你的网站右上角出现一对灯笼

废话不多说下面放上代码祝大家新年快乐

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

复制代码

幽冥之途

感谢楼主的分享

1464390545

6666

啾啾

谢谢分享

ljq4712

感谢楼主分享

trb163

谢谢@Thanks！

浪子笑狂刀

谢谢分享！

Rovia

支持楼主，谢谢分享。

subek

感谢分享，谢谢提供分享

珊瑚科技

谢谢大佬分享