{"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

","css":".socail-media {\n display: flex;\n align-items: center;\n align-content: center;\n justify-content: center;\n gap: 20px;\n list-style: none;\n}\n\n.socail-media li a {\n width: 50px;\n height: 50px;\n background-color: #5b9d15;\n display: flex;\n overflow: hidden;\n align-items: center;\n align-content: center;\n justify-content: center;\n position: relative;\n z-index: 9;\n border: 1px solid #5b9d15;\n}\n\n.socail-media li a svg {\n width: 24px;\n height: 24px;\n -o-object-fit: contain;\n object-fit: contain;\n filter: invert(100%) sepia(0%) saturate(7455%) hue-rotate(57deg) brightness(108%) contrast(105%);\n}\n\n.socail-media li a::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n -webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\n background-color: #fff;\n z-index: -1;\n top: 0;\n left: 0;\n opacity: 0;\n}\n\n.socail-media li a:hover::after {\n animation: sideClip 0.5s linear;\n -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n opacity: 1;\n}\n\n.socail-media li a:hover svg {\n animation: fadeInLeft 0.3s linear both;\n filter: invert(52%) sepia(85%) saturate(2286%) hue-rotate(54deg) brightness(92%) contrast(84%);\n}\n\n@keyframes sideClip {\n 0% {\n clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);\n }\n\n 50% {\n clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);\n }\n\n 100% {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n }\n}\n\n@keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translate3d(-100%, 0, 0);\n }\n\n to {\n opacity: 1;\n transform: none;\n }\n}\n"}

smart-otter-53

👁 实时预览

📝 源代码