:root{--color1:rgb(0, 231, 255);--color2:rgb(255, 0, 231);--color3:rgb(118, 253, 0);--back:url(https://cdn2.bulbagarden.net/upload/1/17/Cardback.jpg);--charizard1:#fac;--charizard2:#ddccaa;--charizardfront:url(https://assets.codepen.io/13471/charizard-gx.webp);--pika1:#54a29e;--pika2:#a79d66;--pikafront:url(https://assets.codepen.io/13471/pikachu-gx.webp);--eevee1:#efb2fb;--eevee2:#acc6f8;--eeveefront:url(https://assets.codepen.io/13471/eevee-gx.webp);--mewtwo1:#efb2fb;--mewtwo2:#acc6f8;--mewtwofront:url(https://assets.codepen.io/13471/mewtwo-gx.webp);--smn1front:url(http://img.blog.1207.top/img/202503290949560.webp);--smn2front:url(http://img.blog.1207.top/img/202503290949542.webp);--smn3front:url(http://img.blog.1207.top/img/202503290949897.webp);--smn4front:url(http://img.blog.1207.top/img/202503290950667.webp);--smn5front:url(http://img.blog.1207.top/img/202503290950669.webp);--smn6front:url(http://img.blog.1207.top/img/202503290950888.webp);--smn7front:url(http://img.blog.1207.top/img/202503290951095.webp);--smn8front:url(http://img.blog.1207.top/img/202503290951415.webp);--smn9front:url(http://img.blog.1207.top/img/202503290951229.webp);--smn10front:url(http://img.blog.1207.top/img/202503290951864.webp);--smn11front:url(http://img.blog.1207.top/img/202503290952597.webp);--smn12front:url(http://img.blog.1207.top/img/202503290952170.webp);--smn13front:url(http://img.blog.1207.top/img/202503290954263.webp);--smn14front:url(http://img.blog.1207.top/img/202503301917051.webp);--smn15front:url(http://img.blog.1207.top/img/202503301917089.webp);--smn16front:url(http://img.blog.1207.top/img/202503301917474.webp)}@keyframes lightning{0%,100%{box-shadow:0 0 10px #ff3535,0 0 20px #cd592b,0 0 30px #ff0,0 0 40px #4dff00,0 0 70px #00f2ff,0 0 80px #002fff,0 0 100px #8000ff,0 0 150px #ff00f2}33%{box-shadow:0 0 10px #15ff00,0 0 20px #00e5ff,0 0 30px #008cff,0 0 40px #2600ff,0 0 70px #9500ff,0 0 80px #ff00fb,0 0 100px #f30,0 0 150px transparent}66%{box-shadow:0 0 10px #3ae1ed,0 0 20px #4d5bf7,0 0 30px #191585,0 0 40px #3f1ac5,0 0 70px #681498,0 0 80px #ae00ff,0 0 100px rgba(255,66,242,.742),0 0 150px #fe4242}}.card{width:71.5vw;height:100vw;position:relative;margin:20px;overflow:hidden;z-index:10;touch-action:none;border-radius:5%/3.5%;box-shadow:-10px -10px 10px -10px var(--color1),-10px -10px 10px -10px var(--color3),10px 10px 10px -10px var(--color2),-7px -7px 10px -5px transparent,7px 7px 10px -5px transparent,0 0 5px 0 rgba(255,255,255,0),0 55px 35px -20px #f48686;transition:transform .5s,box-shadow .2s;will-change:transform,filter;background-color:#6887f8;background-image:var(--front);background-size:cover;background-repeat:no-repeat;background-position:50% 50%;transform-origin:center;animation:6s infinite lightning}.card.charizard{--color1:var(--charizard1);--color2:var(--charizard2);--front:var(--charizardfront)}.card.pika{--color1:var(--pika1);--color2:var(--pika2);--front:var(--pikafront)}.card.mewtwo{--color1:var(--mewtwo1);--color2:var(--mewtwo2);--front:var(--mewtwofront)}.card.eevee{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--eeveefront)}.card.charizard:hover,.card.eevee:hover,.card.mewtwo:hover,.card.pika:hover{animation:6s infinite lightning}.card[class*=smn].active:before,.card[class*=smn]:hover:before{background-image:linear-gradient(115deg,transparent 20%,var(--color1) 36%,var(--color2) 43%,var(--color3) 50%,var(--color4) 57%,var(--color5) 64%,transparent 80%)}.card.smn1{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn1front)}.card.smn2{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn2front)}.card.smn3{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn3front)}.card.smn4{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn4front)}.card.smn5{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn5front)}.card.smn6{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn6front)}.card.smn7{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn7front)}.card.smn8{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn8front)}.card.smn9{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn9front)}.card.smn10{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn10front)}.card.smn11{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn11front)}.card.smn12{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn12front)}.card.smn13{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn13front)}.card.smn14{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn14front)}.card.smn15{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn15front)}.card.smn16{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn16front)}.card.smn17{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn17front)}.card.smn18{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn18front)}.card.smn19{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn19front)}.card.smn20{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn20front)}.card.smn21{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn21front)}.card.smn22{--color1:#ec9bb6;--color2:#ccac6f;--color3:#69e4a5;--color4:#8ec5d6;--color5:#b98cce;--front:var(--smn22front)}.card:after,.card:before{content:"";position:absolute;left:0;right:0;bottom:0;top:0;background-repeat:no-repeat;opacity:.5;mix-blend-mode:color-dodge;transition:.33s}.card:before{background-position:50% 50%;background-size:300% 300%;background-image:linear-gradient(115deg,transparent 0,var(--color1) 25%,transparent 47%,transparent 53%,var(--color2) 75%,transparent 100%);opacity:.5;filter:brightness(.5) contrast(1);z-index:1}.card:after{opacity:1;background-image:url("https://assets.codepen.io/13471/sparkles.gif"),url(https://assets.codepen.io/13471/holo.png),linear-gradient(125deg,#ff008450 15%,#fca40040 30%,#ffff0030 40%,#00ff8a20 60%,#00cfff40 70%,#cc4cfa50 85%);background-position:50% 50%;background-size:160%;background-blend-mode:overlay;z-index:2;filter:brightness(1) contrast(1);transition:.33s;mix-blend-mode:color-dodge;opacity:.75}.card.active:after,.card:hover:after{filter:brightness(1) contrast(1);opacity:1}.card.active,.card:hover{-webkit-animation:none;animation:none;transition:box-shadow .1s ease-out}.card.active:before,.card:hover:before{background-image:linear-gradient(110deg,transparent 25%,var(--color1) 48%,var(--color2) 52%,transparent 75%);background-position:50% 50%;background-size:250% 250%;opacity:.88;filter:brightness(.66) contrast(1.33)}.card.active:after,.card.active:before,.card:hover:after,.card:hover:before{-webkit-animation:none;animation:none;transition:none}.card.animated{transition:none;-webkit-animation:12s holoCard;animation:12s holoCard}.card.animated:before{transition:none;-webkit-animation:12s holoGradient;animation:12s holoGradient}.card.animated:after{transition:none;-webkit-animation:12s holoSparkle;animation:12s holoSparkle}@-webkit-keyframes holoSparkle{0%,100%{opacity:.75;background-position:50% 50%;filter:brightness(1.2) contrast(1.25)}5%,8%{opacity:1;background-position:40% 40%;filter:brightness(.8) contrast(1.2)}13%,16%{opacity:.5;background-position:50% 50%;filter:brightness(1.2) contrast(.8)}35%,38%{opacity:1;background-position:60% 60%;filter:brightness(1) contrast(1)}55%{opacity:.33;background-position:45% 45%;filter:brightness(1.2) contrast(1.25)}}@keyframes holoSparkle{0%,100%{opacity:.75;background-position:50% 50%;filter:brightness(1.2) contrast(1.25)}5%,8%{opacity:1;background-position:40% 40%;filter:brightness(.8) contrast(1.2)}13%,16%{opacity:.5;background-position:50% 50%;filter:brightness(1.2) contrast(.8)}35%,38%{opacity:1;background-position:60% 60%;filter:brightness(1) contrast(1)}55%{opacity:.33;background-position:45% 45%;filter:brightness(1.2) contrast(1.25)}}@-webkit-keyframes holoGradient{0%,100%{opacity:.5;background-position:50% 50%;filter:brightness(.5) contrast(1)}5%,9%{background-position:100% 100%;opacity:1;filter:brightness(.75) contrast(1.25)}13%,17%{background-position:0 0;opacity:.88}35%,39%{background-position:100% 100%;opacity:1;filter:brightness(.5) contrast(1)}55%{background-position:0 0;opacity:1;filter:brightness(.75) contrast(1.25)}}@keyframes holoGradient{0%,100%{opacity:.5;background-position:50% 50%;filter:brightness(.5) contrast(1)}5%,9%{background-position:100% 100%;opacity:1;filter:brightness(.75) contrast(1.25)}13%,17%{background-position:0 0;opacity:.88}35%,39%{background-position:100% 100%;opacity:1;filter:brightness(.5) contrast(1)}55%{background-position:0 0;opacity:1;filter:brightness(.75) contrast(1.25)}}@-webkit-keyframes holoCard{0%,100%{transform:rotateZ(0) rotateX(0) rotateY(0)}5%,8%{transform:rotateZ(0) rotateX(6deg) rotateY(-20deg)}13%,16%{transform:rotateZ(0) rotateX(-9deg) rotateY(32deg)}35%,38%{transform:rotateZ(3deg) rotateX(12deg) rotateY(20deg)}55%{transform:rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg)}}@keyframes holoCard{0%,100%{transform:rotateZ(0) rotateX(0) rotateY(0)}5%,8%{transform:rotateZ(0) rotateX(6deg) rotateY(-20deg)}13%,16%{transform:rotateZ(0) rotateX(-9deg) rotateY(32deg)}35%,38%{transform:rotateZ(3deg) rotateX(12deg) rotateY(20deg)}55%{transform:rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg)}}.demo .card{background-image:var(--back);font-size:2vh}.demo .card>span{position:relative;top:45%}.demo .card:first-of-type,.demo .card:nth-of-type(2),.demo .card:nth-of-type(3){width:20vh;height:27.5vh;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 25px 15px -10px rgba(0,0,0,.5);-webkit-animation:none;animation:none}.demo .card:first-of-type:after,.demo .card:first-of-type:before,.demo .card:nth-of-type(2):after,.demo .card:nth-of-type(2):before,.demo .card:nth-of-type(3):after,.demo .card:nth-of-type(3):before{-webkit-animation:none;animation:none}.demo .card:first-of-type:after,.demo .card:first-of-type:before{display:none}.demo .card:nth-of-type(2){background:0 0}.demo .card:nth-of-type(2):before{display:none}.demo .card:nth-of-type(3){background:0 0}.demo .card:nth-of-type(3):after{display:none}.operator{display:inline-block;vertical-align:middle;font-size:6vh}body,html{height:100%;background-image:linear-gradient(to top,#fbc2eb 0,#a6c1ee 100%);padding:0;z-index:1;transform:translate3d(0,0,.1px)}body{color:#fff;background-color:#01cbef;background-image:linear-gradient(to top,#fbc2eb 0,#a6c1ee 100%);font-family:Heebo,sans-serif;text-align:center;padding:0;margin:0}#zong{color:#fff;background-image:linear-gradient(to top,#fbc2eb 0,#a6c1ee 100%);font-family:Heebo,sans-serif;text-align:center;padding:0;margin:0}h1{display:block;margin:30px 0}#app{position:relative;margin:auto}.cards,.demo{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;perspective:2000px;position:relative;z-index:1;transform:translate3d(.1px,.1px,.1px)}.demo{flex-direction:row;justify-content:center}@media screen and (min-width:600px){.card{width:clamp(12.9vw,61vh,18vw);height:clamp(18vw,85vh,25.2vw)}.cards{flex-direction:row}}.cards .card:nth-child(2),.cards .card:nth-child(2):after,.cards .card:nth-child(2):before{-webkit-animation-delay:.25s;animation-delay:.25s}.cards .card:nth-child(3),.cards .card:nth-child(3):after,.cards .card:nth-child(3):before{-webkit-animation-delay:.5s;animation-delay:.5s}.cards .card:nth-child(4),.cards .card:nth-child(4):after,.cards .card:nth-child(4):before{-webkit-animation-delay:.75s;animation-delay:.75s}p{font-weight:400;font-size:18px;padding:1em;background:rgba(0,0,0,.3);margin-top:0;-webkit-animation:1.5s linear 3s rubberBand;animation:1.5s linear 3s rubberBand}.promo{margin-top:50px}.promo img{margin-top:10px;max-width:80%}p a{color:#0ff}body,html,main{min-height:100%}@-webkit-keyframes rubberBand{from,to{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}}@keyframes rubberBand{from,to{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}}#body333{padding:0;margin:0;justify-content:center;align-items:center;perspective:1200px}#shell222{display:flex;justify-content:center;align-items:center;height:100%;padding:0;margin:0;width:100%}.shell{width:100%;height:100%;display:flex}.box{flex:1;overflow:hidden;transition:.5s;margin:0 10px;box-shadow:10px 10px 20px rgba(0,0,0,.5);border-radius:20px;border:10px solid #fff;background-color:#fff}.box>img{width:100%;height:100%;object-fit:cover;transition:.5s}.box>span{font:200 45px '优设标题黑';text-align:center;height:15%;display:flex;justify-content:center;align-items:center}.box:hover{flex-basis:40%}.box:hover>img{width:100%;height:100%}