{"html":"

\n Pyhton\n\n

\n \n 80%\n \n

\n\n

\n Php\n\n

\n \n 30%\n \n

\n Java\n\n

\n \n 40%\n \n

\n C++\n\n

\n \n 60%\n \n

\n","css":".container {\n position: relative;\n max-width: 500px;\n width: 100%;\n background: #ececec;\n margin: 0 15px;\n padding: 10px 20px;\n border-radius: 7px;\n user-select: none;\n}\n\n.container .skill-box {\n width: 100%;\n margin: 25px 0;\n}\n\n.skill-box .title {\n display: block;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.skill-box .skill-bar {\n height: 8px;\n width: 100%;\n border-radius: 6px;\n margin-top: 6px;\n background: rgba(0, 0, 0, 0.1);\n}\n\n.skill-bar .skill-per {\n position: relative;\n display: block;\n height: 100%;\n width: 90%;\n border-radius: 6px;\n background: #000000;\n animation: progress 0.4s ease-in-out forwards;\n opacity: 0;\n}\n\n.skill-per.html {\n /*progreso de las diferentes lenguajes*/\n width: 80%;\n animation-delay: 0.1s;\n}\n\n.skill-per.css {\n /*progreso de las diferentes lenguajes*/\n width: 30%;\n animation-delay: 0.1s;\n}\n\n.skill-per.javascript {\n /*progreso de las diferentes lenguajes*/\n width: 40%;\n animation-delay: 0.2s;\n}\n\n.skill-per.nodejs {\n /*progreso de las diferentes lenguajes*/\n width: 70%;\n animation-delay: 0.3s;\n}\n\n@keyframes progress {\n 0% {\n width: 0;\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.skill-per .tooltip {\n position: absolute;\n right: -14px;\n top: -28px;\n font-size: 9px;\n font-weight: 500;\n color: #fff;\n padding: 2px 6px;\n border-radius: 3px;\n background: #000000;\n\n z-index: 1;\n}\n\n.tooltip::before {\n content: \"\";\n position: absolute;\n left: 50%;\n bottom: -2px;\n height: 10px;\n width: 10px;\n z-index: -1;\n background: #000000;\n transform: translateX(-50%) rotate(45deg);\n}\n"}

ordinary-dodo-95

👁 实时预览

📝 源代码