{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

UIVERS.IO

","css":".card {\n width: 200px;\n height: 300px;\n position: relative;\n background-image: linear-gradient(230deg, rgba(93, 93, 93, 0.03) 0%, rgba(93, 93, 93, 0.03) 50%, rgba(78, 78, 78, 0.03) 50%, rgba(78, 78, 78, 0.03) 100%), linear-gradient(107deg, rgba(55, 55, 55, 0.01) 0%, rgba(55, 55, 55, 0.01) 50%, rgba(170, 170, 170, 0.01) 50%, rgba(170, 170, 170, 0.01) 100%), linear-gradient(278deg, rgba(16, 16, 16, 0.03) 0%, rgba(16, 16, 16, 0.03) 50%, rgba(24, 24, 24, 0.03) 50%, rgba(24, 24, 24, 0.03) 100%), linear-gradient(205deg, rgba(116, 116, 116, 0.03) 0%, rgba(116, 116, 116, 0.03) 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(150deg, rgba(5, 5, 5, 0.03) 0%, rgba(5, 5, 5, 0.03) 50%, rgba(80, 80, 80, 0.03) 50%, rgba(80, 80, 80, 0.03) 100%), linear-gradient(198deg, rgba(231, 231, 231, 0.03) 0%, rgba(231, 231, 231, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(278deg, rgba(89, 89, 89, 0.03) 0%, rgba(89, 89, 89, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(217deg, rgba(28, 28, 28, 0.03) 0%, rgba(28, 28, 28, 0.03) 50%, rgba(202, 202, 202, 0.03) 50%, rgba(202, 202, 202, 0.03) 100%), linear-gradient(129deg, rgba(23, 23, 23, 0.03) 0%, rgba(23, 23, 23, 0.03) 50%, rgba(244, 244, 244, 0.03) 50%, rgba(244, 244, 244, 0.03) 100%), linear-gradient(135deg, rgb(1, 132, 255), rgb(198, 5, 91));\n display: grid;\n place-content: center;\n border-radius: 20px;\n transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.size-5 {\n width: 5px;\n border-radius: 2px;\n}\n\n.size-10 {\n width: 10px;\n border-radius: 4px;\n}\n\n.size-15 {\n width: 15px;\n border-radius: 5px;\n}\n\n.size-20 {\n width: 20px;\n border-radius: 7px;\n}\n\n.dot-container-main {\n width: 95px;\n height: 110px;\n position: relative;\n}\n\n.dot {\n position: absolute;\n aspect-ratio: 1;\n background: linear-gradient(45deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.34) 100%);\n border-top: 1px solid rgb(255, 255, 255);\n border-right: 1px solid white;\n transition: left 1s ease-in-out, top 1s ease-in-out, transform 0.2s ease-in-out;\n}\n\n.dot:hover {\n transform: scale(1.8);\n}\n\n.dot1 {\n left: -40px;\n top: -80px;\n}\n\n.dot52 {\n left: 10px;\n top: -75px;\n}\n\n.dot4 {\n left: 40px;\n top: -50px;\n}\n\n.dot3 {\n left: -20px;\n top: -70px;\n}\n\n.dot72 {\n left: 50px;\n top: -85px;\n}\n\n.dot2 {\n left: 110px;\n top: -30px;\n}\n\n.dot53 {\n left: 125px;\n top: -80px;\n}\n\n.dot5 {\n left: 100px;\n top: -20px;\n}\n\n.dot73 {\n left: -25px;\n top: -50px;\n}\n\n.dot6 {\n left: 30px;\n top: -45px;\n}\n\n.dot7 {\n left: 80px;\n top: -60px;\n}\n\n.dot55 {\n left: 60px;\n top: -30px;\n}\n\n.dot8 {\n left: 70px;\n top: -35px;\n}\n\n.dot54 {\n left: 120px;\n top: -20px;\n}\n\n.dot56 {\n left: 85px;\n top: -5px;\n}\n\n.dot10 {\n left: 80px;\n top: -20px;\n}\n\n.dot12 {\n left: -40px;\n top: -25px;\n}\n\n.dot9 {\n left: 0px;\n top: -50px;\n}\n\n.dot76 {\n left: 10px;\n top: -20px;\n}\n\n.dot11 {\n left: 110px;\n top: 0px;\n}\n\n.dot59 {\n left: 110px;\n top: 30px;\n}\n\n.dot14 {\n left: 100px;\n top: 10px;\n}\n\n.dot58 {\n left: -20px;\n top: 0px;\n}\n\n.dot13 {\n left: 50px;\n top: -10px;\n}\n\n.dot15 {\n left: 70px;\n top: 0px;\n}\n\n.dot57 {\n left: 30px;\n top: 15px;\n}\n\n.dot17 {\n left: 80px;\n top: 10px;\n}\n\n.dot19 {\n left: 95px;\n top: 30px;\n}\n\n.dot23 {\n left: 130px;\n top: 45px;\n}\n\n.dot61 {\n left: 75px;\n top: 20px;\n}\n\n.dot28 {\n left: 100px;\n top: 40px;\n}\n\n.dot18 {\n left: -35px;\n top: 0px;\n}\n\n.dot16 {\n left: 0px;\n top: 20px;\n}\n\n.dot20 {\n left: -30px;\n top: 10px;\n}\n\n.dot24 {\n left: -30px;\n top: 30px;\n}\n\n.dot21 {\n left: 50px;\n top: 10px;\n}\n\n.dot65 {\n left: 30px;\n top: 30px;\n}\n\n.dot60 {\n left: -15px;\n top: 20px;\n}\n\n.dot25 {\n left: -5px;\n top: 40px;\n}\n\n.dot30 {\n left: 20px;\n top: 40px;\n}\n\n.dot32 {\n left: 0px;\n top: 60px;\n}\n\n.dot78 {\n left: -35px;\n top: 170px;\n}\n\n.dot50 {\n left: 120px;\n top: 180px;\n}\n\n.dot79 {\n left: 60px;\n top: 170px;\n}\n\n.dot69 {\n left: 100px;\n top: 135px;\n}\n\n.dot68 {\n left: 110px;\n top: 100px;\n}\n\n.dot47 {\n left: 0px;\n top: 175px;\n}\n\n.dot71 {\n left: 20px;\n top: 160px;\n}\n\n.dot83 {\n left: 100px;\n top: 170px;\n}\n\n.dot45 {\n left: 10px;\n top: 160px;\n}\n\n.dot67 {\n left: 40px;\n top: 140px;\n}\n\n.dot49 {\n left: 45px;\n top: 190px;\n}\n\n.dot48 {\n left: 20px;\n top: 180px;\n}\n\n.dot46 {\n left: 100px;\n top: 120px;\n}\n\n.dot70 {\n left: 80px;\n top: 145px;\n}\n\n.dot75 {\n left: -20px;\n top: 140px;\n}\n\n.dot82 {\n left: 60px;\n top: 160px;\n}\n\n.dot43 {\n left: 50px;\n top: 170px;\n}\n\n.dot44 {\n left: 60px;\n top: 130px;\n}\n\n.dot77 {\n left: 110px;\n top: 70px;\n}\n\n.dot42 {\n left: 90px;\n top: 110px;\n}\n\n.dot81 {\n left: 90px;\n top: 140px;\n}\n\n.dot62 {\n left: 100px;\n top: 55px;\n}\n\n.dot31 {\n left: 85px;\n top: 80px;\n}\n\n.dot33 {\n left: -30px;\n top: 130px;\n}\n\n.dot80 {\n left: 70px;\n top: 120px;\n}\n\n.dot39 {\n left: 30px;\n top: 115px;\n}\n\n.dot63 {\n left: -30px;\n top: 55px;\n}\n\n.dot41 {\n left: 50px;\n top: 110px;\n}\n\n.dot40 {\n left: 40px;\n top: 120px;\n}\n\n.dot66 {\n left: 70px;\n top: 95px;\n}\n\n.dot37 {\n left: 10px;\n top: 130px;\n}\n\n.dot51 {\n left: -5px;\n top: 105px;\n}\n\n.dot29 {\n left: -15px;\n top: 90px;\n}\n\n.dot38 {\n left: 10px;\n top: 90px;\n}\n\n.dot35 {\n left: 50px;\n top: 90px;\n}\n\n.dot64 {\n left: 80px;\n top: 45px;\n}\n\n.dot34 {\n left: 70px;\n top: 70px;\n}\n\n.dot36 {\n left: 65px;\n top: 80px;\n}\n\n.dot74 {\n left: 30px;\n top: 70px;\n}\n\n.dot26 {\n left: 45px;\n top: 60px;\n}\n\n.dot22 {\n left: 60px;\n top: 35px;\n}\n\n.dot27 {\n left: 50px;\n top: 70px;\n}\n\n.card:hover {\n transform: scale(1.1);\n}\n\n.card:hover .text {\n opacity: 1;\n}\n\n.card:hover .dot1 {\n left: 0px;\n top: 0px;\n}\n\n.card:hover .dot2 {\n left: 90px;\n top: 0px;\n}\n\n.card:hover .dot3 {\n left: 5px;\n top: 5px;\n}\n\n.card:hover .dot4 {\n left: 45px;\n top: 5px;\n}\n\n.card:hover .dot5 {\n left: 85px;\n top: 5px;\n}\n\n.card:hover .dot6 {\n left: 15px;\n top: 10px;\n}\n\n.card:hover .dot7 {\n left: 75px;\n top: 10px;\n}\n\n.card:hover .dot8 {\n left: 55px;\n top: 15px;\n}\n\n.card:hover .dot9 {\n left: 15px;\n top: 20px;\n}\n\n.card:hover .dot10 {\n left: 60px;\n top: 20px;\n}\n\n.card:hover .dot11 {\n left: 90px;\n top: 20px;\n}\n\n.card:hover .dot12 {\n left: 0px;\n top: 25px;\n}\n\n.card:hover .dot13 {\n left: 75px;\n top: 25px;\n}\n\n.card:hover .dot14 {\n left: 85px;\n top: 25px;\n}\n\n.card:hover .dot15 {\n left: 80px;\n top: 30px;\n}\n\n.card:hover .dot16 {\n left: 15px;\n top: 35px;\n}\n\n.card:hover .dot17 {\n left: 75px;\n top: 35px;\n}\n\n.card:hover .dot18 {\n left: 0px;\n top: 40px;\n}\n\n.card:hover .dot19 {\n left: 85px;\n top: 40px;\n}\n\n.card:hover .dot20 {\n left: 5px;\n top: 45px;\n}\n\n.card:hover .dot21 {\n left: 50px;\n top: 45px;\n}\n\n.card:hover .dot22 {\n left: 60px;\n top: 45px;\n}\n\n.card:hover .dot23 {\n left: 90px;\n top: 45px;\n}\n\n.card:hover .dot24 {\n left: 0px;\n top: 50px;\n}\n\n.card:hover .dot25 {\n left: 15px;\n top: 50px;\n}\n\n.card:hover .dot26 {\n left: 45px;\n top: 50px;\n}\n\n.card:hover .dot27 {\n left: 55px;\n top: 50px;\n}\n\n.card:hover .dot28 {\n left: 80px;\n top: 50px;\n}\n\n.card:hover .dot29 {\n left: 10px;\n top: 55px;\n}\n\n.card:hover .dot30 {\n left: 20px;\n top: 55px;\n}\n\n.card:hover .dot31 {\n left: 75px;\n top: 55px;\n}\n\n.card:hover .dot32 {\n left: 25px;\n top: 60px;\n}\n\n.card:hover .dot33 {\n left: 5px;\n top: 65px;\n}\n\n.card:hover .dot34 {\n left: 55px;\n top: 65px;\n}\n\n.card:hover .dot35 {\n left: 30px;\n top: 70px;\n}\n\n.card:hover .dot36 {\n left: 50px;\n top: 70px;\n}\n\n.card:hover .dot37 {\n left: 25px;\n top: 75px;\n}\n\n.card:hover .dot38 {\n left: 35px;\n top: 75px;\n}\n\n.card:hover .dot39 {\n left: 30px;\n top: 90px;\n}\n\n.card:hover .dot40 {\n left: 40px;\n top: 90px;\n}\n\n.card:hover .dot41 {\n left: 50px;\n top: 90px;\n}\n\n.card:hover .dot42 {\n left: 80px;\n top: 90px;\n}\n\n.card:hover .dot43 {\n left: 35px;\n top: 95px;\n}\n\n.card:hover .dot44 {\n left: 55px;\n top: 95px;\n}\n\n.card:hover .dot45 {\n left: 25px;\n top: 100px;\n}\n\n.card:hover .dot46 {\n left: 50px;\n top: 100px;\n}\n\n.card:hover .dot47 {\n left: 20px;\n top: 105px;\n}\n\n.card:hover .dot48 {\n left: 45px;\n top: 105px;\n}\n\n.card:hover .dot49 {\n left: 55px;\n top: 105px;\n}\n\n.card:hover .dot50 {\n left: 90px;\n top: 105px;\n}\n\n.card:hover .dot51 {\n left: 15px;\n top: 60px;\n}\n\n.card:hover .dot52 {\n left: 10px;\n top: 0px;\n}\n\n.card:hover .dot53 {\n left: 75px;\n top: 0px;\n}\n\n.card:hover .dot54 {\n left: 85px;\n top: 10px;\n}\n\n.card:hover .dot55 {\n left: 45px;\n top: 15px;\n}\n\n.card:hover .dot56 {\n left: 75px;\n top: 15px;\n}\n\n.card:hover .dot57 {\n left: 10px;\n top: 25px;\n}\n\n.card:hover .dot58 {\n left: 0px;\n top: 30px;\n}\n\n.card:hover .dot59 {\n left: 85px;\n top: 30px;\n}\n\n.card:hover .dot60 {\n left: 10px;\n top: 40px;\n}\n\n.card:hover .dot61 {\n left: 75px;\n top: 40px;\n}\n\n.card:hover .dot62 {\n left: 85px;\n top: 50px;\n}\n\n.card:hover .dot63 {\n left: 0px;\n top: 55px;\n}\n\n.card:hover .dot64 {\n left: 55px;\n top: 55px;\n}\n\n.card:hover .dot65 {\n left: 30px;\n top: 60px;\n}\n\n.card:hover .dot66 {\n left: 40px;\n top: 70px;\n}\n\n.card:hover .dot67 {\n left: 20px;\n top: 90px;\n}\n\n.card:hover .dot68 {\n left: 85px;\n top: 90px;\n}\n\n.card:hover .dot69 {\n left: 80px;\n top: 100px;\n}\n\n.card:hover .dot70 {\n left: 40px;\n top: 95px;\n}\n\n.card:hover .dot71 {\n left: 30px;\n top: 100px;\n}\n\n.card:hover .dot72 {\n left: 50px;\n top: 0px;\n}\n\n.card:hover .dot73 {\n left: 0px;\n top: 10px;\n}\n\n.card:hover .dot74 {\n left: 40px;\n top: 55px;\n}\n\n.card:hover .dot75 {\n left: 10px;\n top: 65px;\n}\n\n.card:hover .dot76 {\n left: 45px;\n top: 25px;\n}\n\n.card:hover .dot77 {\n left: 75px;\n top: 60px;\n}\n\n.card:hover .dot78 {\n left: 0px;\n top: 90px;\n}\n\n.card:hover .dot79 {\n left: 60px;\n top: 95px;\n}\n\n.card:hover .dot80 {\n left: 60px;\n top: 90px;\n}\n\n.card:hover .dot81 {\n left: 70px;\n top: 90px;\n}\n\n.card:hover .dot82 {\n left: 75px;\n top: 95px;\n}\n\n.card:hover .dot83 {\n left: 75px;\n top: 105px;\n}\n\n.size-20 {\n display: grid;\n place-content: center;\n border: 1px solid rgb(255, 255, 255);\n}\n\n.size-20::before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n border-radius: inherit;\n background: black;\n opacity: 0;\n transition: all 0.2s ease-in-out;\n}\n\n.size-20 .svg {\n fill: rgba(255, 255, 255, 0);\n height: 10px;\n width: 10px;\n transition: all 0.2s ease-in-out;\n}\n\n.size-20:hover {\n transform: scale(1.5);\n border: none;\n}\n\n.size-20:hover::before {\n opacity: 1;\n}\n\n.size-20:hover .svg {\n fill: white;\n z-index: 99;\n}\n\n.text {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 10px;\n letter-spacing: 5px;\n color: white;\n opacity: 0;\n transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);\n}"}

dull-dolphin-40

👁 实时预览

📝 源代码