{"html":"

\n To the moon!\n

\n \n \n\t\t\t\t\t\t\n

\n","css":".card {\n width: 290px;\n height: 350px;\n background: linear-gradient(135deg, rgba(48,48,48,1) 48%, rgba(0,0,0,1) 100%);\n background-size: 300%,300%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 15px;\n box-shadow: 5px 5px 15px 5px #000000;\n overflow: hidden;\n transition: all 1s ease;\n}\n\n.moon {\n width: 70px;\n height: 70px;\n top: 15%;\n right: 120px;\n position: absolute;\n fill: white;\n transform: rotate(-20deg);\n transition: all 1s ease;\n}\n\n.rocket {\n width: 70px;\n height: 70px;\n bottom: -2%;\n left: -2%;\n position: absolute;\n fill: white;\n transition: all 1.9s ease;\n}\n\n.star {\n position: absolute;\n background: radial-gradient(circle, rgba(251,239,63,1) 0%, rgba(255,253,212,1) 100%);\n clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n}\n\n.star-1 {\n width: 100px;\n height: 100px;\n bottom: 90px;\n left: -15px;\n transition: all 1s ease;\n}\n\n.star-2 {\n width: 150px;\n height: 150px;\n top: -10%;\n left: -10%;\n transition: all .5s ease;\n}\n\n.star-3 {\n width: 100px;\n height: 100px;\n bottom: 5%;\n right: -15px;\n transition: all .3s ease;\n}\n\n.star-4 {\n width: 20px;\n height: 20px;\n top: 4%;\n right: 5px;\n transition: all 1.4s ease;\n}\n\n.star-5 {\n width: 20px;\n height: 20px;\n bottom: 24%;\n right: 45%;\n animation: rotate 3s normal linear infinite;\n}\n\n.star-6 {\n width: 20px;\n height: 20px;\n top: 14%;\n right: 25%;\n animation: rotate 5s normal linear infinite;\n}\n\n.star-7 {\n width: 40px;\n height: 40px;\n top: 34%;\n right: 65%;\n animation: rotate 5s normal linear infinite;\n}\n\n.card-info span {\n font-size: 1.2em;\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n transition: all 1s ease;\n}\n\n.card:hover {\n background: rgb(48,48,48);\n background: linear-gradient(135deg, rgba(48,48,48,1) 10%, rgba(0,0,0,1) 90%);\n background-size: 100%,100%;\n}\n\n.card:hover .star-1,\n.card:hover .star-3 {\n background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);\n transform: scale(1.2) rotate(10deg);\n}\n\n.card:hover .star-2,\n.card:hover .star-4,\n.card:hover .star-5 {\n background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%);\n transform: scale(1.2) rotate(-150deg);\n}\n\n.card:hover .rocket {\n transform: scale(.3) translate(450px,-730px) rotate(-260deg);\n}\n\n.card:hover .moon {\n width: 50px;\n height: 50px;\n}\n\n.card:hover span {\n font-size: 1.5em;\n}\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate3d(0, 0, 1, 0deg);\n transform: rotate3d(0, 0, 1, 0deg);\n }\n\n 25% {\n -webkit-transform: rotate3d(0, 0, 1, 90deg);\n transform: rotate3d(0, 0, 1, 90deg);\n }\n\n 50% {\n -webkit-transform: rotate3d(0, 0, 1, 180deg);\n transform: rotate3d(0, 0, 1, 180deg);\n }\n\n 75% {\n -webkit-transform: rotate3d(0, 0, 1, 270deg);\n transform: rotate3d(0, 0, 1, 270deg);\n }\n\n 100% {\n -webkit-transform: rotate3d(0, 0, 1, 360deg);\n transform: rotate3d(0, 0, 1, 360deg);\n }\n}"}

stupid-baboon-34

👁 实时预览

📝 源代码