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

灯笼.png (105.08 KB, 下载次数: 0)

下载附件  保存到相册

前天 10:02 上传

1.     <!–灯笼开始 –>
2. <div class=”deng-box2″>
3.     <div class=”deng”>
4.         <div class=”xian”>
5.         </div>
6.         <div class=”deng-a”>
7.             <div class=”deng-b”>
8.                 <div class=”deng-t”>年</div>
9.             </div>
10.         </div>
11.         <div class=”shui shui-a”>
12.             <div class=”shui-c”>
13.             </div>
14.             <div class=”shui-b”></div>
15.         </div>
16.     </div>
17. </div>
18. <div class=”deng-box3″>
19.     <div class=”deng”>
20.         <div class=”xian”>
21.         </div>
22.         <div class=”deng-a”>
23.             <div class=”deng-b”>
24.                 <div class=”deng-t”>新</div>
25.             </div>
26.         </div>
27.         <div class=”shui shui-a”>
28.             <div class=”shui-c”></div>
29.             <div class=”shui-b”>
30.             </div>
31.         </div>
32.     </div>
33. </div>
34. <div class=”deng-box1″>
35.     <div class=”deng”>
36.         <div class=”xian”>
37.         </div>
38.         <div class=”deng-a”>
39.             <div class=”deng-b”>
40.                 <div class=”deng-t”>乐</div>
41.             </div>
42.         </div>
43.         <div class=”shui shui-a”>
44.             <div class=”shui-c”></div>
45.             <div class=”shui-b”></div>
46.         </div>
47.     </div>
48. </div>
49. <div class=”deng-box”>
50.     <div class=”deng”>
51.         <div class=”xian”>
52.         </div>
53.         <div class=”deng-a”>
54.             <div class=”deng-b”>
55.                 <div class=”deng-t”>快</div>
56.             </div>
57.         </div>
58.         <div class=”shui shui-a”>
59.             <div class=”shui-c”>
60.             </div>
61.             <div class=”shui-b”></div>
62.         </div>
63.     </div>
64. </div>
65. <style type=”text/css”>
66.     .deng-box {
67.         position: fixed;
68.         top: -40px;
69.         right: 150px;
70.         z-index: 9999;
71.         pointer-events: none;
72.     }
73.     .deng-box1 {
74.         position: fixed;
75.         top: -30px;
76.         right: 10px;
77.         z-index: 9999;
78.         pointer-events: none
79.     }
80.     .deng-box2 {
81.         position: fixed;
82.         top: -40px;
83.         left: 150px;
84.         z-index: 9999;
85.         pointer-events: none
86.     }
87.     .deng-box3 {
88.         position: fixed;
89.         top: -30px;
90.         left: 10px;
91.         z-index: 9999;
92.         pointer-events: none
93.     }
94.     .deng-box1 .deng,
95.     .deng-box3 .deng {
96.         position: relative;
97.         width: 120px;
98.         height: 90px;
99.         margin: 50px;
100.         background: #d8000f;
101.         background: rgba(216, 0, 15, .8);
102.         border-radius: 50% 50%;
103.         -webkit-transform-origin: 50% -100px;
104.         -webkit-animation: swing 5s infinite ease-in-out;
105.         box-shadow: -5px 5px 30px 4px #fc903d
106.     }
107.     .deng {
108.         position: relative;
109.         width: 120px;
110.         height: 90px;
111.         margin: 50px;
112.         background: #d8000f;
113.         background: rgba(216, 0, 15, .8);
114.         border-radius: 50% 50%;
115.         -webkit-transform-origin: 50% -100px;
116.         -webkit-animation: swing 3s infinite ease-in-out;
117.         box-shadow: -5px 5px 50px 4px #fa6c00
118.     }
119.     .deng-a {
120.         width: 100px;
121.         height: 90px;
122.         background: #d8000f;
123.         background: rgba(216, 0, 15, .1);
124.         margin: 12px 8px 8px 8px;
125.         border-radius: 50% 50%;
126.         border: 2px solid #dc8f03
127.     }
128.     .deng-b {
129.         width: 45px;
130.         height: 90px;
131.         background: #d8000f;
132.         background: rgba(216, 0, 15, .1);
133.         margin: -4px 8px 8px 26px;
134.         border-radius: 50% 50%;
135.         border: 2px solid #dc8f03
136.     }
137.     .xian {
138.         position: absolute;
139.         top: -20px;
140.         left: 60px;
141.         width: 2px;
142.         height: 20px;
143.         background: #dc8f03
144.     }
145.     .shui-a {
146.         position: relative;
147.         width: 5px;
148.         height: 20px;
149.         margin: -5px 0 0 59px;
150.         -webkit-animation: swing 4s infinite ease-in-out;
151.         -webkit-transform-origin: 50% -45px;
152.         background: orange;
153.         border-radius: 0 0 5px 5px
154.     }
155.     .shui-b {
156.         position: absolute;
157.         top: 14px;
158.         left: -2px;
159.         width: 10px;
160.         height: 10px;
161.         background: #dc8f03;
162.         border-radius: 50%
163.     }
164.     .shui-c {
165.         position: absolute;
166.         top: 18px;
167.         left: -2px;
168.         width: 10px;
169.         height: 35px;
170.         background: orange;
171.         border-radius: 0 0 0 5px
172.     }
173.     .deng:before {
174.         position: absolute;
175.         top: -7px;
176.         left: 29px;
177.         height: 12px;
178.         width: 60px;
179.         content: ” “;
180.         display: block;
181.         z-index: 999;
182.         border-radius: 5px 5px 0 0;
183.         border: solid 1px #dc8f03;
184.         background: orange;
185.         background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
186.     }
187.     .deng:after {
188.         position: absolute;
189.         bottom: -7px;
190.         left: 10px;
191.         height: 12px;
192.         width: 60px;
193.         content: ” “;
194.         display: block;
195.         margin-left: 20px;
196.         border-radius: 0 0 5px 5px;
197.         border: solid 1px #dc8f03;
198.         background: orange;
199.         background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
200.     }
201.     .deng-t {
202.         font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;
203.         font-size: 3.2rem;
204.         color: #dc8f03;
205.         font-weight: 700;
206.         line-height: 85px;
207.         text-align: center
208.     }
209.     .night .deng-box,
210.     .night .deng-box1,
211.     .night .deng-t {
212.         background: 0 0 !important
213.     }
214.     @-moz-keyframes swing {
215.         0% {
216.             -moz-transform: rotate(-10deg)
217.         }
218.         50% {
219.             -moz-transform: rotate(10deg)
220.         }
221.         100% {
222.             -moz-transform: rotate(-10deg)
223.         }
224.     }
225.     @-webkit-keyframes swing {
226.         0% {
227.             -webkit-transform: rotate(-10deg)
228.         }
229.         50% {
230.             -webkit-transform: rotate(10deg)
231.         }
232.         100% {
233.             -webkit-transform: rotate(-10deg)
234.         }
235.     }
236. </style>
237. <!–灯笼结束 –>