孔明灯特效源码

manxin

一个有意思的小玩意儿，孔明灯

1.     <div class="moon"></div>
   
2.     <style>
   
3.     @keyframes rotateAnimationX {
   
4.             0% {
   
5.                 transform: rotateX(0deg) rotateZ(0deg);
   
6.             }
   
7. 
   
8.             25% {
   
9.                 transform: rotateX(5deg) rotateZ(5deg);
   
10.             }
    
11. 
    
12.             50% {
    
13.                 transform: rotateX(0deg) rotateZ(0deg);
    
14.             }
    
15. 
    
16.             75% {
    
17.                 transform: rotateX(-5deg) rotateZ(-5deg);
    
18.             }
    
19. 
    
20.             100% {
    
21.                 transform: rotateX(0deg) rotateZ(0deg);
    
22.             }
    
23.         }
    
24. 
    
25.         @keyframes rotateAnimationY {
    
26.             0% {
    
27.                 transform: rotateY(0deg);
    
28. 
    
29.             }
    
30. 
    
31.             100% {
    
32.                 transform: rotateY(360deg);
    
33.             }
    
34.         }
    
35. 
    
36.         @keyframes shape {
    
37.             0% {
    
38.                 background: radial-gradient(at 50% 90%, yellow 10%, #ffae00 40%, red);
    
39.             }
    
40. 
    
41.             50% {
    
42.                 background: radial-gradient(at 50% 90%, yellow 20%, #ffae00 50%, red);
    
43.             }
    
44. 
    
45.             100% {
    
46.                 background: radial-gradient(at 50% 90%, yellow 10%, #ffae00 40%, red);
    
47.             }
    
48.         }
    
49. * {
    
50.             margin: 0;
    
51.             padding: 0;
    
52.         }
    
53. 
    
54.         html,
    
55.         body {
    
56.             width: 100%;
    
57.             height: 100%;
    
58. 
    
59.             background: linear-gradient(to bottom, #000022, #000033);
    
60.         }
    
61. 
    
62.         .moon {
    
63.             width: 200px;
    
64.             height: 200px;
    
65.             border-radius: 50%;
    
66.             background: radial-gradient(circle at center, #f6f6f6, #e5e5e5);
    
67.             box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.5);
    
68. 
    
69.             position: absolute;
    
70.             top: 100px;
    
71.             left: 300px;
    
72.         }
    
73.         </style>
    
74.         <script>
    
75.         var blessings = [
    
76.   "心想事成",
    
77.   "平安健康",
    
78.   "万事如意",
    
79.   "吉祥如意",
    
80.   "阖家欢乐",
    
81.   "财源广进",
    
82. ];
    
83. 
    
84. class Light {
    
85.   constructor(s) {
    
86.     const w = 200,
    
87.       h = 400;
    
88.     this.scale = s;
    
89. 
    
90.     this.lightWidth = w;
    
91.     this.lightHeight = h;
    
92. 
    
93.     this.faceWidth = this.lightWidth / 2;
    
94.     this.faceHeight = this.lightHeight / 2;
    
95.     this.faceTop = 0;
    
96.     this.sin60Width = this.faceWidth * Math.sin(60 * (Math.PI / 180));
    
97.     this.faceCenter = this.lightWidth / 2 - this.faceWidth / 2;
    
98. 
    
99.     this.fireWidth = this.faceWidth * 0.4;
    
100.     this.fireHeight = this.fireWidth * 2;
     
101. 
     
102.     this.isUpdate = true;
     
103.     this.isRotate = this.scale > .4 ? true : false;
     
104. 
     
105.     this.init();
     
106.   }
     
107. 
     
108.   init() {
     
109.     const wrap = this.initWrap();
     
110.     const light = this.initLight();
     
111.     const fire = this.initFire();
     
112. 
     
113.     wrap.appendChild(light);
     
114.     light.appendChild(fire);
     
115. 
     
116.     const body = document.getElementsByTagName("body")[0];
     
117. 
     
118.     body.appendChild(wrap);
     
119.   }
     
120. 
     
121.   initWrap() {
     
122.     const wrap = document.createElement("div");
     
123.     wrap.className = "light-wrap";
     
124.     wrap.style.position = "fixed";
     
125.     wrap.style.zIndex = this.lightHeight + this.lightWidth;
     
126. 
     
127.     let top = parseInt(Math.random() * window.innerHeight);
     
128.     let left = parseInt(Math.random() * window.innerWidth);
     
129. 
     
130.     wrap.style.top = top + "px";
     
131.     wrap.style.left = left + "px";
     
132.     wrap.style.transform = `scale(${this.scale})`
     
133. 
     
134.     wrap.style.height = this.lightHeight + "px";
     
135.     wrap.style.width = this.lightWidth + "px";
     
136. 
     
137.     const update = () => {
     
138.       const step = 0.2;
     
139. 
     
140.       top - step * 2 > -this.lightHeight
     
141.         ? (top -= step * 2)
     
142.         : (top = window.innerHeight);
     
143.       left - step > -this.lightWidth
     
144.         ? (left -= step)
     
145.         : (left = window.innerHeight);
     
146.       wrap.style.top = top + "px";
     
147.       wrap.style.left = left + "px";
     
148.       setTimeout(update, 1000 / 30);
     
149.     };
     
150.     if (this.isUpdate) {
     
151.       update();
     
152.     }
     
153. 
     
154.     return wrap;
     
155.   }
     
156. 
     
157.   initLight() {
     
158.     const light = document.createElement("div");
     
159.     light.className = "light";
     
160. 
     
161.     light.style.height = this.lightHeight + "px";
     
162.     light.style.width = this.lightWidth + "px";
     
163. 
     
164.     light.style.position = "relative";
     
165. 
     
166.     light.style.perspective = this.faceWidth * 10 + "px";
     
167.     light.style.perspectiveOrigin = `center ${this.lightHeight / 2}px`;
     
168.     light.style.transformStyle = "preserve-3d";
     
169. 
     
170.     light.style.position = "relative";
     
171. 
     
172.     light.style.animation = `rotateAnimationX ${
     
173.       parseInt(Math.random() * 10) + 5
     
174.     }s linear infinite`;
     
175. 
     
176.     for (let i = 0; i < 6; i++) {
     
177.       const face = this.initFace(i * 60, i);
     
178.       light.appendChild(face);
     
179.     }
     
180. 
     
181.     return light;
     
182.   }
     
183. 
     
184.   initFace(deg, _i) {
     
185.     const face = document.createElement("div");
     
186.     face.className = "face";
     
187. 
     
188.     face.style.height = this.faceHeight + "px";
     
189.     face.style.width = this.faceWidth + "px";
     
190. 
     
191.     face.style.transformStyle = "preserve-3d";
     
192.     face.style.position = "absolute";
     
193. 
     
194.     face.style.top = 0;
     
195.     face.style.left = this.faceCenter + "px";
     
196.     face.style.transformOrigin = `50% 50% ${this.sin60Width}px`;
     
197. 
     
198.     face.style.transform = `translateZ(${
     
199.       -1 * this.sin60Width
     
200.     }px) rotateY(${deg}deg)`;
     
201. 
     
202.     const rotate = () => {
     
203.       deg++;
     
204.       face.style.transform = `translateZ(${
     
205.         -1 * this.sin60Width
     
206.       }px) rotateY(${deg}deg)`;
     
207.       setTimeout(rotate, 1000 / 30);
     
208.     };
     
209.     this.isRotate && rotate();
     
210. 
     
211.     const faceTop = this.initFaceTop();
     
212.     const faceSqure = this.initFaceSqure(_i);
     
213.     const faceLine = this.initFaceLine();
     
214. 
     
215.     face.appendChild(faceTop);
     
216.     face.appendChild(faceSqure);
     
217.     face.appendChild(faceLine);
     
218. 
     
219.     return face;
     
220.   }
     
221. 
     
222.   initFaceTop() {
     
223.     const faceTop = document.createElement("div");
     
224.     faceTop.className = "face-top";
     
225. 
     
226.     faceTop.style.width = this.faceWidth + "px";
     
227.     faceTop.style.height =
     
228.       this.sin60Width / Math.cos(30 * (Math.PI / 180)) + "px";
     
229.     faceTop.style.background = `radial-gradient(at 50% 90%, yellow 10%, #ffae00 40%, red)`;
     
230.     faceTop.style.transform = `rotateX(-60deg)`;
     
231.     faceTop.style.transformOrigin = `0 100%`;
     
232.     faceTop.style.clipPath = `polygon(50% 0%, 0% 100%, 100% 100%)`;
     
233. 
     
234.     return faceTop;
     
235.   }
     
236. 
     
237.   initFaceSqure(_i) {
     
238.     const faceSqure = document.createElement("div");
     
239.     faceSqure.className = "face-squre";
     
240. 
     
241.     faceSqure.style.height = this.faceHeight + "px";
     
242.     faceSqure.style.width = this.faceWidth + "px";
     
243.     faceSqure.style.background = `radial-gradient(at 50% 70%, #0d0034 10%, #381460 40%, red)`;
     
244.     faceSqure.style.animation = `shape 2s linear infinite`;
     
245. 
     
246.     const word = this.initWord(_i);
     
247.     faceSqure.appendChild(word);
     
248. 
     
249.     return faceSqure;
     
250.   }
     
251. 
     
252.   initWord(_i) {
     
253.     const word = document.createElement("div");
     
254.     word.className = "word";
     
255. 
     
256.     word.innerText = blessings[_i];
     
257. 
     
258.     word.style.height = "100%";
     
259.     word.style.width = "100%";
     
260. 
     
261.     word.style.textAlign = "center";
     
262.     word.style.writingMode = "vertical-rl";
     
263.     word.style.lineHeight = this.faceWidth + "px";
     
264.     word.style.transform = "scaleX(-1)";
     
265.     word.style.letterSpacing = "2px";
     
266.     word.style.fontFamily = "楷体";
     
267.     word.style.fontWeight = "bold";
     
268.     word.style.userSelect = 'none'
     
269.     word.style.color = 'rgb(126 0 0)'
     
270. 
     
271.     word.style.fontSize = parseInt(this.faceWidth / 4) + "px";
     
272. 
     
273.     return word;
     
274.   }
     
275. 
     
276.   initFaceLine() {
     
277.     const faceLine = document.createElement("div");
     
278.     faceLine.className = "face-line";
     
279. 
     
280.     faceLine.style.width = this.faceWidth + "px";
     
281.     faceLine.style.height =
     
282.       this.sin60Width / Math.cos(30 * (Math.PI / 180)) + "px";
     
283.     faceLine.style.background = `linear-gradient(to right, transparent 48%, black 48%, transparent 52%)`;
     
284.     faceLine.style.transform = `rotateX(60deg)`;
     
285.     faceLine.style.transformOrigin = `0 0`;
     
286. 
     
287.     return faceLine;
     
288.   }
     
289. 
     
290.   initFire() {
     
291.     const fire = document.createElement("div");
     
292.     fire.className = "fire";
     
293. 
     
294.     fire.style.position = `absolute`;
     
295.     fire.style.top =
     
296.       this.faceHeight + this.faceWidth - 0.2 * this.faceWidth + "px";
     
297.     fire.style.left = this.lightWidth / 2 - this.fireWidth / 2 + "px";
     
298.     fire.style.width = this.fireWidth + "px";
     
299.     fire.style.height = this.fireHeight + "px";
     
300.     fire.style.perspective = this.faceWidth * 10 + "px";
     
301.     fire.style.perspectiveOrigin = `center ${this.faceHeight}px`;
     
302.     fire.style.transformStyle = `preserve-3d`;
     
303. 
     
304.     const firEItem = this.initFireItem(30);
     
305.     fire.appendChild(firEItem);
     
306.     return fire;
     
307.   }
     
308. 
     
309.   initFireItem(d) {
     
310.     const fireItem = document.createElement("div");
     
311. 
     
312.     fireItem.style.position = `absolute`;
     
313.     fireItem.style.height = `100%`;
     
314.     fireItem.style.width = `100%`;
     
315.     fireItem.style.background = `radial-gradient(at 50% 80%, yellow 10%, #8B0000 20%, transparent 40%, transparent)`;
     
316.     fireItem.style.transform = `rotateY(${d}deg)`;
     
317. 
     
318.     return fireItem;
     
319.   }
     
320. }
     
321. 
     
322. const lightList = []
     
323. 
     
324.     for (let i = 0; i < 18; i++) {
     
325.         lightList.push(Math.random() * (.8 - .2) + .2)
     
326.     }
     
327. 
     
328.     lightList.sort().forEach(i => new Light(i))
     
329.     </script>

复制代码