{"html":"

\n Welcome\n

Easer
Cheaper
World Wild

Secrets
Expensive
World Wild

","css":".card-2 {\n position: relative;\n width: 300px;\n height: 400px;\n background-image: linear-gradient(to top,rgb(117, 117, 197),#67be96);\n border-radius: 30px;\n border: 2px solid white;\n overflow: hidden;\n}\n\n.h1-circle {\n position: absolute;\n right: 70px;\n border-radius: 50%;\n width: 400px;\n height: 400px;\n background-image: radial-gradient(circle at center, #8798c5, #494fa1);\n opacity: .8;\n}\n\n.card-2:hover .h1-circle,\n.h1-circle:hover {\n animation: moving-weel 1s linear;\n animation-fill-mode: forwards;\n}\n\n.h1-circle:not(:hover) {\n animation: moving-weel-2 1s linear;\n animation-fill-mode: backwards;\n}\n\n@keyframes moving-weel-2 {\n 0% {\n rotate: 160deg;\n right: -170px;\n }\n\n 50% {\n right: 20px;\n rotate: 75deg;\n }\n\n 100% {\n rotate: 0deg;\n }\n}\n\n@keyframes moving-weel {\n 0% {\n rotate: 0deg;\n }\n\n 50% {\n right: 20px;\n rotate: 90deg;\n }\n\n 100% {\n rotate: 180deg;\n right: -170px;\n }\n}\n\n.h1-circle ul li {\n list-style: none;\n color: white;\n font-size: 20px;\n margin: 20px;\n}\n\n#h1-circle-ul-1 {\n display: flex;\n flex: 1;\n flex-direction: column;\n position: absolute;\n top: 100px;\n left: 200px;\n transition: 500ms ease-in;\n}\n\n#h1-circle-ul-2 {\n opacity: 0;\n flex: 1;\n flex-direction: column;\n position: absolute;\n top: 100px;\n left: 200px;\n transition: 1s ease-in;\n}\n\n#h1-circle-ul-2 li {\n transform: rotate(180deg);\n font-size: 20px;\n margin: 30px;\n}\n\n#card-2-h1 {\n position: absolute;\n left: 60px;\n top: 10px;\n color: transparent;\n font-size: 40px;\n font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n z-index: 700;\n background: linear-gradient(to bottom right, transparent, white 90%),rgb(117, 190, 117);\n -webkit-background-clip: text;\n background-clip: text;\n text-transform: uppercase;\n transition: 1s ease-in;\n}\n\n.card-2:hover #h1-circle-ul-2 {\n opacity: 1;\n transition: 1s ease-in;\n}\n\n.card-2:hover #h1-circle-ul-1 {\n opacity: 0;\n transition: 500ms ease-in;\n}"}

popular-gecko-14

👁 实时预览

📝 源代码