@source-bug/magic-design-react/dist/index.css

A component library that can achieve magic effects

._element-2d_tm8h5_1,._element-3d_tm8h5_1,._corner-swiper_tm8h5_1{transform-style:preserve-3d}._element-2d_tm8h5_1,._element-3d_tm8h5_1,._swiper-container_tm8h5_5{transition:transform .36s ease,transform-origin .36s ease,width .36s ease,-webkit-clip-path .36s ease;transition:transform .36s ease,clip-path .36s ease,transform-origin .36s ease,width .36s ease;transition:transform .36s ease,clip-path .36s ease,transform-origin .36s ease,width .36s ease,-webkit-clip-path .36s ease}._corner-swiper_tm8h5_1{flex-shrink:0;overflow:visible}._element-2d_tm8h5_1{transform-origin:var(--position) var(--position) 0}._element-3d_tm8h5_1{display:-webkit-box;width:var(--position);transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) translate(1px);transform-origin:right}._element-2d_tm8h5_1{-webkit-clip-path:polygon(var(--position) 0,100% 0,100% 100%,var(--position) 100%);clip-path:polygon(var(--position) 0,100% 0,100% 100%,var(--position) 100%);transform:rotateX(var(--rotate-x))}@-webkit-keyframes _move_18iyn_1{50%{transform:translate(-10px)}}@keyframes _move_18iyn_1{50%{transform:translate(-10px)}}._cloud_18iyn_6{position:absolute;top:5%;left:70%;width:60px;height:20px;background-color:#81d4fa;border-radius:10px;box-shadow:1px 1px 30px #0097a7;-webkit-animation:_move_18iyn_1 3s infinite linear;animation:_move_18iyn_1 3s infinite linear}._cloudx_18iyn_18{position:absolute;top:23%;left:55%;width:60px;height:20px;background-color:#81d4fa;border-radius:10px;-webkit-animation:_move_18iyn_1 3s infinite linear;animation:_move_18iyn_1 3s infinite linear}@-webkit-keyframes _meteor_w4lpv_1{10%{opacity:1}80%{top:75%;left:10%;opacity:0}}@keyframes _meteor_w4lpv_1{10%{opacity:1}80%{top:75%;left:10%;opacity:0}}._night_w4lpv_11 li{position:absolute;width:3px;height:3px;list-style:none;background-color:#fff;border-radius:100%;transform:rotate(45deg)}._night_w4lpv_11 li:nth-child(1){top:30%;left:65%}._night_w4lpv_11 li:nth-child(2){top:35%;left:53%}._night_w4lpv_11 li:nth-child(3){top:20%;left:75%;width:2px;height:2px;opacity:0;-webkit-animation:_meteor_w4lpv_1 1.5s infinite linear;animation:_meteor_w4lpv_1 1.5s infinite linear;-webkit-animation-delay:.6s;animation-delay:.6s}._night_w4lpv_11 li:nth-child(4){top:5%;left:50%}._night_w4lpv_11 li:nth-child(5){top:20%;left:55%;width:1px;height:15px;opacity:0;-webkit-animation:_meteor_w4lpv_1 1.5s infinite linear;animation:_meteor_w4lpv_1 1.5s infinite linear}._moon_w4lpv_50{position:absolute;top:-10%;left:65%;width:70px;height:70px;background:rgb(255,241,118);border-radius:100%;box-shadow:1px 1px 30px #e0e0e0}._spot1_w4lpv_61{position:absolute;top:0%;left:85%;width:10px;height:10px;background-color:#777;border-radius:100%}._spot2_w4lpv_71{position:absolute;top:30%;left:75%;width:5px;height:5px;background-color:#777;border-radius:100%}@-webkit-keyframes _rainy-flash_1dkxs_1{48%{background-color:#607d8b}50%{background-color:#fff}55%{background-color:#607d8b}57%{background-color:#fff}}@keyframes _rainy-flash_1dkxs_1{48%{background-color:#607d8b}50%{background-color:#fff}55%{background-color:#607d8b}57%{background-color:#fff}}@-webkit-keyframes _fall_1dkxs_1{10%{opacity:.8}50%{opacity:1;transform:translate(-10px,30px)}to{transform:translate(-25px,70px)}}@keyframes _fall_1dkxs_1{10%{opacity:.8}50%{opacity:1;transform:translate(-10px,30px)}to{transform:translate(-25px,70px)}}._rainy_1dkxs_27 li{position:absolute;width:2px;height:7px;list-style:none;background-color:#eee;border-radius:10%;opacity:0;transform:rotate(25deg);-webkit-animation:_fall_1dkxs_1 3s infinite linear;animation:_fall_1dkxs_1 3s infinite linear}._rainy_1dkxs_27 li:nth-child(1){top:10%;left:95%}._rainy_1dkxs_27 li:nth-child(2){top:5%;left:83%;-webkit-animation-delay:.3s;animation-delay:.3s}._rainy_1dkxs_27 li:nth-child(3){top:4%;left:87%;-webkit-animation-delay:.6s;animation-delay:.6s}._rainy_1dkxs_27 li:nth-child(4){top:15%;left:70%;-webkit-animation-delay:1s;animation-delay:1s}._rainy_1dkxs_27 li:nth-child(5){top:10%;left:75%}._rainy-cloud_1dkxs_62{position:absolute;top:5%;left:60%;width:60px;height:20px;background-color:#597180;border-radius:10px;box-shadow:1px 1px 30px #4d636f;-webkit-animation:_rainy-flash_1dkxs_1 1.5s infinite linear;animation:_rainy-flash_1dkxs_1 1.5s infinite linear}@-webkit-keyframes _fall_yom2l_1{10%{opacity:.8}50%{opacity:1;transform:translate(-10px,30px)}to{transform:translate(-25px,70px)}}@keyframes _fall_yom2l_1{10%{opacity:.8}50%{opacity:1;transform:translate(-10px,30px)}to{transform:translate(-25px,70px)}}._snowy_yom2l_13 li{position:absolute;width:5px;height:5px;list-style:none;background-color:#777;border-radius:100%;box-shadow:1px 1px 30px #555;opacity:0;-webkit-animation:_fall_yom2l_1 3s infinite linear;animation:_fall_yom2l_1 3s infinite linear}._snowy_yom2l_13 li:nth-child(1){top:0%;left:100%}._snowy_yom2l_13 li:nth-child(2){top:5%;left:90%}._snowy_yom2l_13 li:nth-child(3){top:-10%;left:80%;-webkit-animation-delay:2s;animation-delay:2s}._snowy_yom2l_13 li:nth-child(4){top:10%;left:100%;-webkit-animation-delay:2s;animation-delay:2s}._snowy_yom2l_13 li:nth-child(5){top:20%;left:80%;-webkit-animation-delay:.5s;animation-delay:.5s}._snowy_yom2l_13 li:nth-child(6){top:35%;left:70%;background-color:#bbb;-webkit-animation-delay:.5s;animation-delay:.5s}._snowy_yom2l_13 li:nth-child(7){top:23%;left:60%;background-color:#bbb;-webkit-animation-delay:.8s;animation-delay:.8s}._snowy_yom2l_13 li:nth-child(8){top:5%;left:70%;background-color:#bbb;-webkit-animation-delay:.8s;animation-delay:.8s}._snowe_yom2l_66{position:absolute;top:58%;left:42%;width:40px;height:40px;background-color:#ddd;border-radius:60px}._snowex_yom2l_76{position:absolute;top:50%;left:50%;width:15px;height:15px;background-color:#bbb;border-radius:15px}._stick_yom2l_86{position:absolute;top:60%;left:40%;z-index:-1;width:3px;height:15px;background-color:#333;transform:rotate(-45deg)}._stick2_yom2l_97{position:absolute;top:60%;left:70%;z-index:-1;width:3px;height:15px;background-color:#333;transform:rotate(45deg)}@-webkit-keyframes _inex_14k97_1{50%{opacity:.4}60%{opacity:1}}@keyframes _inex_14k97_1{50%{opacity:.4}60%{opacity:1}}._sun_14k97_9{position:absolute;top:-10%;left:65%;width:50px;height:50px;background:linear-gradient(to bottom left,rgb(255,235,59) 0%,rgb(249,168,37) 90%);border-radius:100%;box-shadow:1px 1px 30px #ffa000;-webkit-animation:_inex_14k97_1 3s infinite linear;animation:_inex_14k97_1 3s infinite linear}._sunx_14k97_21{position:absolute;top:30%;left:45%;width:10px;height:10px;background-color:#fff;border-radius:100%;opacity:.2}._weather-container_r2qa2_1{position:relative;z-index:1;width:150px;height:150px;border-radius:40%;transition:background-color var(--animate-duration) ease,box-shadow var(--animate-duration) ease}._weather-sunny_r2qa2_10{background:linear-gradient(to top right,rgba(255,87,34,0),rgb(251,140,0));background-color:#ff5722;box-shadow:1px 1px 30px #ff6e00}._weather-cloudy_r2qa2_16{background:linear-gradient(to top right,rgba(63,81,181,0),rgb(3,155,229) 40%);background-color:#3f51b5;box-shadow:1px 1px 30px #0277bd}._weather-rainy_r2qa2_22{background:#91cb56 linear-gradient(to top right,rgba(145,203,86,0),#43c1d4 50%);background-color:#91cb56;box-shadow:1px 1px 30px #43c0d4}._weather-snowy_r2qa2_28{background:linear-gradient(to top right,rgba(117,117,117,0),rgb(33,33,33) 90%);background-color:#757575;box-shadow:1px 1px 30px #212121}._weather-nighty_r2qa2_34{background:linear-gradient(to bottom right,rgba(63,81,181,0),rgb(171,71,188) 70%);background-color:#3f51b5;box-shadow:1px 1px 30px #512da8}