{"html":"

\n \n \n \n \n

Hover me

\n \n \n \n \n

0E3746

\n \n \n \n \n

EAE8DC

\n \n \n \n \n

F4F2EC

\n \n \n \n \n

BE2623

\n","css":".card {\n width: 320px;\n height: 220px;\n perspective: 1000px;\n background: #fff;\n border-radius: 10px;\n box-shadow: 1px 1px 20px #c7c7c7;\n}\n\n.card .paleta {\n width: 100%;\n height: 180px;\n position: absolute;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.component {\n height: 23px;\n}\n\n.card .paleta .cores {\n width: 80px;\n height: 180px;\n cursor: pointer;\n transition: 0.3s linear;\n overflow: hidden;\n}\n.card .paleta .cores:hover {\n width: 120px;\n transition: 0.4s linear;\n}\n\n.circle {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #fff;\n position: absolute;\n top: -60px;\n box-shadow: 1px 1px 8px #c7c7c7;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.card .paleta .cor1 {\n background-color: #0e3746;\n border-radius: 0px 0px 0px 10px;\n}\n.card .paleta .cor2 {\n background-color: #eae8dc;\n}\n.card .paleta .cor3 {\n background-color: #f4f2ec;\n}\n.card .paleta .cor4 {\n background-color: #be2623;\n border-radius: 0px 0px 10px 0px;\n}\n\n.card .paleta .cores .nome {\n width: 100%;\n height: 30px;\n background-color: #fff;\n text-align: center;\n font-size: 11px;\n font-family: Roboto, sans-serif;\n font-weight: 550;\n}\n\n.card .paleta .func {\n width: 100px;\n display: block;\n transform: rotate(-90deg);\n position: absolute;\n bottom: 40px;\n margin-left: -41px;\n padding-left: 5px;\n color: #fff;\n font-size: 15px;\n font-family: sans-serif;\n font-weight: 500;\n}\n\n.div1 {\n cursor: pointer;\n transition: background-color 0.3s;\n position: absolute;\n bottom: 0;\n width: 80px;\n height: 150px;\n}\n\n.div2 {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #fff;\n position: absolute;\n top: -60px;\n left: 135px;\n box-shadow: 1px 1px 8px #c7c7c7;\n align-items: center;\n justify-content: center;\n display: none;\n}\n\n.div1:hover + .div2 {\n background-color: #0e3746;\n display: flex;\n color: #fff;\n animation: cssAnimation_0 1512ms 1 ease-out;\n}\n\n.div3 {\n cursor: pointer;\n transition: background-color 0.3s;\n position: absolute;\n bottom: 0;\n width: 80px;\n height: 150px;\n}\n\n.div4 {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #fff;\n position: absolute;\n top: -60px;\n left: 135px;\n box-shadow: 1px 1px 8px #c7c7c7;\n align-items: center;\n justify-content: center;\n display: none;\n}\n\n.div3:hover + .div4 {\n background-color: #eae8dc;\n display: flex;\n color: #fff;\n animation: cssAnimation_0 1512ms 1 ease-out;\n}\n\n.div5 {\n cursor: pointer;\n transition: background-color 0.3s;\n position: absolute;\n bottom: 0;\n width: 80px;\n height: 150px;\n}\n\n.div6 {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #fff;\n position: absolute;\n top: -60px;\n left: 135px;\n box-shadow: 1px 1px 8px #c7c7c7;\n align-items: center;\n justify-content: center;\n display: none;\n}\n\n.div5:hover + .div6 {\n background-color: #f4f2ec;\n display: flex;\n color: #fff;\n animation: cssAnimation_0 1512ms 1 ease-out;\n}\n\n.div7 {\n cursor: pointer;\n transition: background-color 0.3s;\n position: absolute;\n bottom: 0;\n width: 80px;\n height: 150px;\n}\n\n.div8 {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #fff;\n position: absolute;\n top: -60px;\n left: 135px;\n box-shadow: 1px 1px 8px #c7c7c7;\n align-items: center;\n justify-content: center;\n display: none;\n}\n\n.div7:hover + .div8 {\n background-color: #be2623;\n display: flex;\n color: #fff;\n animation: cssAnimation_0 1512ms 1 ease-out;\n}\n\n@keyframes cssAnimation_0 {\n to {\n transform: rotate(360deg) translate(0px, 0px);\n }\n}\n"}

brave-kangaroo-28

👁 实时预览

📝 源代码