Всем привет. В этой статье мы научимся делать анимированную панель навыков (Skills Bar), используя только HTML и CSS
Содержание статьи: скрыть
Содержание файлов:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title></title> </head> <body> <div class="skills"> <div class="skill"> <div class="skill-name"> HTML </div> <div class="skill-bar"> <div class="skill-per" per="90%" style="max-width: 90%;"></div> </div> </div> <div class="skill"> <div class="skill-name"> CSS </div> <div class="skill-bar"> <div class="skill-per" per="70%" style="max-width: 70%;"></div> </div> </div> <div class="skill"> <div class="skill-name"> JavaScript </div> <div class="skill-bar"> <div class="skill-per" per="60%" style="max-width: 60%;"></div> </div> </div> </div> </body> </html>
Style.css
* { margin: 0; padding: 0; font-family: sans-serif; box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #2e2e2e; } .skills { width: 100%; max-width: 600px; padding: 0 20px; } .skill-name { font-size: 18px; font-weight: 700; color: #f1f1f1; text-transform: uppercase; margin: 20px 0; } .skill-bar { height: 14px; background: #202020; border-radius: 3px; } .skill-per { height: 14px; background: tomato; border-radius: 3px; position: relative; animation: fillBars 2.5s 1; } .skill-per::before { content: attr(per); position: absolute; padding: 4px 6px; background: #f1f1f1; border-radius: 4px; font-size: 12px; top: -35px; right: 0; transform: translateX(50%); } .skill-per::after { content: ""; position: absolute; width: 7px; height: 7px; background: #f1f1f1; top: -18px; right: 0; transform: translateX(50%) rotate(45deg); border-radius: 1px; } @keyframes fillBars { from { width: 0; } to { width: 100%; } }
Видео с пошаговой инструкцией
Вот мы и научились делать анимированный SkillsBar. Такой интересный элемент можно использовать на любом сайте. Спасибо за внимание!
Комментарии:
Комментарии для сайта Cackle