HTML+CSS+JS实现“口袋妖怪卡片全息效果”

yycvip

这款效果不仅适合喜欢口袋妖怪的人，还具有令人惊叹的全息视觉效果。每张卡片都使用动画 GIF 和渐变色打造出闪闪发光的效果，尽管这种设计不适合所有场景，但它绝对是独一无二的。

HTML

1. <main id=app>
   
2.    
   
3.   <p>Please checkout the newer version of this; <a target="_top" href="https://codepen.io/simeydotme/pen/abYWJdX">https://codepen.io/simeydotme/pen/abYWJdX</a></p>
   
4.   
   
5.   <h1>Pokemon Card, Holo Effect</h1>
   
6.   
   
7.   <section class="cards">
   
8.     <div class="card charizard animated"></div>
   
9.     <div class="card pika animated"></div>
   
10.     <div class="card eevee animated"></div>
    
11.     <div class="card mewtwo animated"></div>
    
12.   </section>
    
13.   
    
14. 
    
15.   
    
16.   
    
17.   
    
18.   
    
19.   <style class="hover"></style>
    
20.   
    
21.   <section class="demo">
    
22.     <div class="card"></div>
    
23.     <span class="operator">+</span>
    
24.     <div class="card"><span>color-dodge</span></div>
    
25.     <span class="operator">+</span>
    
26.     <div class="card"><span>color-dodge</span></div>
    
27.   </section>
    
28. 
    
29.   
    
30. </main>
    
31. 
    
32. 
    
33. <section class="promo">
    
34.   <p>
    
35.   <a target="_top" href="https://codepen.io/simeydotme/pen/abYWJdX">
    
36.     View Version 2, much improved here
    
37.     <img src="https://assets.codepen.io/13471/internal/screenshots/pens/abYWJdX.custom.png?version=1674760356" alt="">
    
38.   </a>
    
39.   </p>
    
40. </section>

复制代码

CSS

1. :root {
   
2.   --color1: rgb(0, 231, 255);
   
3.   --color2: rgb(255, 0, 231);
   
4.   --back: url(https://cdn2.bulbagarden.net/upload/1/17/Cardback.jpg);
   
5.   --charizard1: #fac;
   
6.   --charizard2: #ddccaa;
   
7.   --charizardfront: url(https://assets.codepen.io/13471/charizard-gx.webp);
   
8.   --pika1: #54a29e;
   
9.   --pika2: #a79d66;
   
10.   --pikafront: url(https://assets.codepen.io/13471/pikachu-gx.webp);
    
11.   --eevee1: #efb2fb;
    
12.   --eevee2: #acc6f8;
    
13.   --eeveefront: url(https://assets.codepen.io/13471/eevee-gx.webp);
    
14.   --mewtwo1: #efb2fb;
    
15.   --mewtwo2: #acc6f8;
    
16.   --mewtwofront: url(https://assets.codepen.io/13471/mewtwo-gx.webp);
    
17. }
    
18. 
    
19. 
    
20. 
    
21. .card {
    
22. 
    
23.   width: 71.5vw;
    
24.   height: 100vw;
    
25.     // width: clamp(200px, 61vh, 18vw);
    
26.     // height: clamp(280px, 85vh, 25.2vw);
    
27.   @media screen and (min-width: 600px) {
    
28.     // width: 61vh;
    
29.     // height: 85vh;
    
30.     // max-width: 500px;
    
31.     // max-height: 700px;
    
32.     width: clamp(12.9vw, 61vh, 18vw);
    
33.     height: clamp(18vw, 85vh, 25.2vw);
    
34.   }
    
35.   
    
36.   position: relative;
    
37.   overflow: hidden;
    
38.   margin: 20px;
    
39.   overflow: hidden;
    
40.   z-index: 10;
    
41.   touch-action: none;
    
42.   
    
43.   border-radius: 5% / 3.5%;
    
44.   box-shadow:
    
45.     -5px -5px 5px -5px var(--color1),
    
46.     5px 5px 5px -5px var(--color2),
    
47.     -7px -7px 10px -5px transparent,
    
48.     7px 7px 10px -5px transparent,
    
49.     0 0 5px 0px rgba(255,255,255,0),
    
50.     0 55px 35px -20px rgba(0, 0, 0, 0.5);
    
51.   
    
52.   transition: transform 0.5s ease, box-shadow 0.2s ease;
    
53.   will-change: transform, filter;
    
54.   
    
55.   background-color: #040712;
    
56.   background-image: var(--front);
    
57.   background-size: cover;
    
58.   background-repeat: no-repeat;
    
59.   background-position: 50% 50%;
    
60.   transform-origin: center;
    
61.   
    
62. }
    
63. 
    
64. .card:hover {
    
65.   box-shadow:
    
66.     -20px -20px 30px -25px var(--color1),
    
67.     20px 20px 30px -25px var(--color2),
    
68.     -7px -7px 10px -5px var(--color1),
    
69.     7px 7px 10px -5px var(--color2),
    
70.     0 0 13px 4px rgba(255,255,255,0.3),
    
71.     0 55px 35px -20px rgba(0, 0, 0, 0.5);
    
72. }
    
73. 
    
74. .card.charizard {
    
75.   --color1: var(--charizard1);
    
76.   --color2: var(--charizard2);
    
77.   --front: var(--charizardfront);
    
78. }
    
79. .card.pika {
    
80.   --color1: var(--pika1);
    
81.   --color2: var(--pika2);
    
82.   --front: var(--pikafront);
    
83. }
    
84. .card.mewtwo {
    
85.   --color1: var(--mewtwo1);
    
86.   --color2: var(--mewtwo2);
    
87.   --front: var(--mewtwofront);
    
88. }
    
89. .card.eevee {
    
90.   --color1: #ec9bb6;
    
91.   --color2: #ccac6f;
    
92.   --color3: #69e4a5;
    
93.   --color4: #8ec5d6;
    
94.   --color5: #b98cce;
    
95.   --front: var(--eeveefront);
    
96. }
    
97. 
    
98. .card:before,
    
99. .card:after {
    
100.   content: "";
     
101.   position: absolute;
     
102.   left: 0;
     
103.   right: 0;
     
104.   bottom: 0;
     
105.   top: 0;
     
106.   background-repeat: no-repeat;
     
107.   opacity: .5;
     
108.   mix-blend-mode: color-dodge;
     
109.   transition: all .33s ease;
     
110. }
     
111. 
     
112. .card:before {
     
113.   background-position: 50% 50%;
     
114.   background-size: 300% 300%;
     
115.   background-image: linear-gradient(
     
116.     115deg,
     
117.     transparent 0%,
     
118.     var(--color1) 25%,
     
119.     transparent 47%,
     
120.     transparent 53%,
     
121.     var(--color2) 75%,
     
122.     transparent 100%
     
123.   );
     
124.   opacity: .5;
     
125.   filter: brightness(.5) contrast(1);
     
126.   z-index: 1;
     
127. }
     
128. 
     
129. .card:after {
     
130.   opacity: 1;
     
131.   background-image: url("https://assets.codepen.io/13471/sparkles.gif"),
     
132.     url(https://assets.codepen.io/13471/holo.png),
     
133.     linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
     
134.   background-position: 50% 50%;
     
135.   background-size: 160%;
     
136.   background-blend-mode: overlay;
     
137.   z-index: 2;
     
138.   filter: brightness(1) contrast(1);
     
139.   transition: all .33s ease;
     
140.   mix-blend-mode: color-dodge;
     
141.   opacity: .75;
     
142. }
     
143. 
     
144. .card.active:after,
     
145. .card:hover:after {
     
146.   filter: brightness(1) contrast(1);;
     
147.   opacity: 1;
     
148. }
     
149. 
     
150. .card.active,
     
151. .card:hover {
     
152.   animation: none;
     
153.   transition: box-shadow 0.1s ease-out;
     
154. }
     
155. 
     
156. .card.active:before,
     
157. .card:hover:before {
     
158.   animation: none;
     
159.   background-image: linear-gradient(
     
160.     110deg,
     
161.     transparent 25%,
     
162.     var(--color1) 48%,
     
163.     var(--color2) 52%,
     
164.     transparent 75%
     
165.   );
     
166.   background-position: 50% 50%;
     
167.   background-size: 250% 250%;
     
168.   opacity: .88;
     
169.   filter: brightness(.66) contrast(1.33);
     
170.   transition: none;
     
171. }
     
172. 
     
173. .card.active:before,
     
174. .card:hover:before,
     
175. .card.active:after,
     
176. .card:hover:after {
     
177.   animation: none;
     
178.   transition: none;
     
179. }
     
180. 
     
181. .card.animated {
     
182.   transition: none;
     
183.   animation: holoCard 12s ease 0s 1;
     
184.   &:before {
     
185.     transition: none;
     
186.     animation: holoGradient 12s ease 0s 1;
     
187.   }
     
188.   &:after {
     
189.     transition: none;
     
190.     animation: holoSparkle 12s ease 0s 1;
     
191.   }
     
192. }
     
193. 
     
194. 
     
195. 
     
196. 
     
197. @keyframes holoSparkle {
     
198.   0%, 100% {
     
199.     opacity: .75; background-position: 50% 50%; filter: brightness(1.2) contrast(1.25);
     
200.   }
     
201.   5%, 8% {
     
202.     opacity: 1; background-position: 40% 40%; filter: brightness(.8) contrast(1.2);
     
203.   }
     
204.   13%, 16% {
     
205.     opacity: .5; background-position: 50% 50%; filter: brightness(1.2) contrast(.8);
     
206.   }
     
207.   35%, 38% {
     
208.     opacity: 1; background-position: 60% 60%; filter: brightness(1) contrast(1);
     
209.   }
     
210.   55% {
     
211.     opacity: .33; background-position: 45% 45%; filter: brightness(1.2) contrast(1.25);
     
212.   }
     
213. }
     
214. 
     
215. @keyframes holoGradient {
     
216.   0%, 100% {
     
217.     opacity: 0.5;
     
218.     background-position: 50% 50%;
     
219.     filter: brightness(.5) contrast(1);
     
220.   }
     
221.   5%, 9% {
     
222.     background-position: 100% 100%;
     
223.     opacity: 1;
     
224.     filter: brightness(.75) contrast(1.25);
     
225.   }
     
226.   13%, 17% {
     
227.     background-position: 0% 0%;
     
228.     opacity: .88;
     
229.   }
     
230.   35%, 39% {
     
231.     background-position: 100% 100%;
     
232.     opacity: 1;
     
233.     filter: brightness(.5) contrast(1);
     
234.   }
     
235.   55% {
     
236.     background-position: 0% 0%;
     
237.     opacity: 1;
     
238.     filter: brightness(.75) contrast(1.25);
     
239.   }
     
240. }
     
241. 
     
242. @keyframes holoCard {
     
243.   0%, 100% {
     
244.     transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
     
245.   }
     
246.   5%, 8% {
     
247.     transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
     
248.   }
     
249.   13%, 16% {
     
250.     transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
     
251.   }
     
252.   35%, 38% {
     
253.     transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
     
254.   }
     
255.   55% {
     
256.     transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
     
257.   }
     
258. }
     
259. 
     
260. 
     
261. 
     
262. .card.eevee:hover {
     
263.   box-shadow:
     
264.     0 0 30px -5px white,
     
265.     0 0 10px -2px white,
     
266.     0 55px 35px -20px rgba(0, 0, 0, 0.5);
     
267. }
     
268. .card.eevee:hover:before,
     
269. .card.eevee.active:before {
     
270.   background-image: linear-gradient(
     
271.     115deg,
     
272.     transparent 20%,
     
273.     var(--color1) 36%,
     
274.     var(--color2) 43%,
     
275.     var(--color3) 50%,
     
276.     var(--color4) 57%,
     
277.     var(--color5) 64%,
     
278.     transparent 80%
     
279.   );
     
280. }
     
281. 
     
282. 
     
283. 
     
284. 
     
285. .demo .card {
     
286.   background-image: var(--back);
     
287.   font-size: 2vh
     
288. }
     
289. .demo .card > span {
     
290.   position: relative;
     
291.   top: 45%;
     
292. }
     
293. 
     
294. .demo .card:nth-of-type(1),
     
295. .demo .card:nth-of-type(2),
     
296. .demo .card:nth-of-type(3) {
     
297.   width: 20vh;
     
298.   height: 27.5vh;
     
299.   box-shadow: inset 0 0 0 1px rgba(white,0.4), 0 25px 15px -10px rgba(0, 0, 0, 0.5);
     
300.   animation: none;
     
301. }
     
302. 
     
303. .demo .card:nth-of-type(1),
     
304. .demo .card:nth-of-type(2),
     
305. .demo .card:nth-of-type(3) {
     
306.   &:before, &:after {
     
307.     animation: none;
     
308.     // opacity: 1;
     
309.   }
     
310. }
     
311. .demo .card:nth-of-type(1) {
     
312.   &:before, &:after { display: none; }
     
313. }
     
314. .demo .card:nth-of-type(2) {
     
315.   background: none;
     
316.   &:before { display: none; }
     
317. }
     
318. .demo .card:nth-of-type(3) {
     
319.   background: none;
     
320.   &:after { display: none; }
     
321. }
     
322. 
     
323. .operator {
     
324.   display: inline-block;
     
325.   vertical-align: middle;
     
326.   font-size: 6vh;
     
327. }
     
328. 
     
329. 
     
330. 
     
331. 
     
332. 
     
333. 
     
334. html, body {
     
335.   height: 100%;
     
336.   background-color: #333844;
     
337.   padding: 0;
     
338.   z-index: 1;
     
339.   transform: translate3d(0,0,0.1px);
     
340. }
     
341. body {
     
342.   color: white;
     
343.   background-color: #333844;
     
344.   font-family: "Heebo", sans-serif;
     
345.   text-align: center;
     
346. }
     
347. h1 {
     
348.   display: block;
     
349.   margin: 30px 0;
     
350. }
     
351. p {
     
352.   margin-top: 5px;
     
353.   font-weight: 200;
     
354. }
     
355. #app {
     
356.   position: relative;
     
357. }
     
358. 
     
359. .demo,
     
360. .cards {
     
361.   display: flex;
     
362.   flex-direction: column;
     
363.   align-items: center;
     
364.   justify-content: space-evenly;
     
365.   perspective: 2000px;
     
366.   position: relative;
     
367.   z-index: 1;
     
368.   transform: translate3d(0.1px, 0.1px, 0.1px )
     
369. }
     
370. .demo {
     
371.   flex-direction: row;
     
372.   justify-content: center;
     
373. }
     
374. 
     
375. @media screen and (min-width: 600px) {
     
376.   .cards {
     
377.     flex-direction: row;
     
378.   }
     
379. }
     
380. 
     
381. 
     
382. 
     
383. 
     
384. 
     
385. 
     
386. .cards .card {
     
387.   &:nth-child(2) {
     
388.     &, &:before, &:after {
     
389.       animation-delay: 0.25s;
     
390.     }
     
391.   }
     
392.   &:nth-child(3) {
     
393.     &, &:before, &:after {
     
394.       animation-delay: 0.5s;
     
395.     }
     
396.   }
     
397.   &:nth-child(4) {
     
398.     &, &:before, &:after {
     
399.       animation-delay: 0.75s;
     
400.     }
     
401.   }
     
402. }
     
403. 
     
404. 
     
405. p {
     
406.   font-weight: 400;
     
407.   font-size: 18px;
     
408.   padding: 1em;
     
409.   background: rgba(0,0,0,0.3);
     
410.   margin-top: 0;
     
411.   animation: rubberBand 1.5s linear 3s 1;
     
412. }
     
413. .promo {
     
414.   margin-top: 50px;
     
415. }
     
416. .promo img {
     
417.   margin-top: 10px;
     
418.   max-width: 80%;
     
419. }
     
420. p a {
     
421.   color: cyan;
     
422. }
     
423. 
     
424. html,body,main {
     
425.   min-height: 100%;
     
426. }
     
427. 
     
428. 
     
429. 
     
430. @keyframes rubberBand {
     
431.   from {
     
432.     transform: scale3d(1, 1, 1);
     
433.   }
     
434. 
     
435.   30% {
     
436.     transform: scale3d(1.25, 0.75, 1);
     
437.   }
     
438. 
     
439.   40% {
     
440.     transform: scale3d(0.75, 1.25, 1);
     
441.   }
     
442. 
     
443.   50% {
     
444.     transform: scale3d(1.15, 0.85, 1);
     
445.   }
     
446. 
     
447.   65% {
     
448.     transform: scale3d(0.95, 1.05, 1);
     
449.   }
     
450. 
     
451.   75% {
     
452.     transform: scale3d(1.05, 0.95, 1);
     
453.   }
     
454. 
     
455.   to {
     
456.     transform: scale3d(1, 1, 1);
     
457.   }
     
458. }

复制代码

JS

1. /*
   
2. 
   
3.   using
   
4.     - an animated gif of sparkles.
   
5.     - an animated gradient as a holo effect.
   
6.     - color-dodge mix blend mode
   
7.   
   
8. */
   
9. var x;
   
10. var $cards = $(".card");
    
11. var $style = $(".hover");
    
12. 
    
13. $cards
    
14.   .on("mousemove touchmove", function(e) {
    
15.     // normalise touch/mouse
    
16.     var pos = [e.offsetX,e.offsetY];
    
17.     e.preventDefault();
    
18.     if ( e.type === "touchmove" ) {
    
19.       pos = [ e.touches[0].clientX, e.touches[0].clientY ];
    
20.     }
    
21.     var $card = $(this);
    
22.     // math for mouse position
    
23.     var l = pos[0];
    
24.     var t = pos[1];
    
25.     var h = $card.height();
    
26.     var w = $card.width();
    
27.     var px = Math.abs(Math.floor(100 / w * l)-100);
    
28.     var py = Math.abs(Math.floor(100 / h * t)-100);
    
29.     var pa = (50-px)+(50-py);
    
30.     // math for gradient / background positions
    
31.     var lp = (50+(px - 50)/1.5);
    
32.     var tp = (50+(py - 50)/1.5);
    
33.     var px_spark = (50+(px - 50)/7);
    
34.     var py_spark = (50+(py - 50)/7);
    
35.     var p_opc = 20+(Math.abs(pa)*1.5);
    
36.     var ty = ((tp - 50)/2) * -1;
    
37.     var tx = ((lp - 50)/1.5) * .5;
    
38.     // css to apply for active card
    
39.     var grad_pos = `background-position: ${lp}% ${tp}%;`
    
40.     var sprk_pos = `background-position: ${px_spark}% ${py_spark}%;`
    
41.     var opc = `opacity: ${p_opc/100};`
    
42.     var tf = `transform: rotateX(${ty}deg) rotateY(${tx}deg)`
    
43.     // need to use a <style> tag for psuedo elements
    
44.     var style = `
    
45.       .card:hover:before { ${grad_pos} }  /* gradient */
    
46.       .card:hover:after { ${sprk_pos} ${opc} }   /* sparkles */
    
47.     `
    
48.     // set / apply css class and style
    
49.     $cards.removeClass("active");
    
50.     $card.removeClass("animated");
    
51.     $card.attr( "style", tf );
    
52.     $style.html(style);
    
53.     if ( e.type === "touchmove" ) {
    
54.       return false;
    
55.     }
    
56.     clearTimeout(x);
    
57.   }).on("mouseout touchend touchcancel", function() {
    
58.     // remove css, apply custom animation on end
    
59.     var $card = $(this);
    
60.     $style.html("");
    
61.     $card.removeAttr("style");
    
62.     x = setTimeout(function() {
    
63.       $card.addClass("animated");
    
64.     },2500);
    
65.   });

复制代码