/ Новости и уроки / Анимация панелей личных умений

Анимация панелей личных умений

286
Анимация панелей личных умений
Панели навыков представляют уровень знаний, связанных с определенными задачами - веб-дизайн, иллюстрация, брендинг, дизайн персонажей и в этом уроке я хочу продемонстрировать, как вы можете создавать панели умений при помощи css, используя анимацию ключевых кадров.

В этом уроке я хочу продемонстрировать, как вы можете создавать панели умений при помощи css, используя анимацию ключевых кадров. Это также вполне возможно для запуска с использованием JavaScript, который был бы сильнее в старых устаревших веб-браузерах. Однако ключевые кадры CSS3 становятся все более популярными с гораздо более широкой поддержкой в эти дни. Взгляните на мою живую демонстрацию, чтобы увидеть конечный продукт.

Разметка HTML

Давайте начнем с обычной разметки html. Id skillset будет служить для обертке, поэтому мы можем центрировать все, увеличивать или уменьшать ширину или настраивать другие параметры в CSS. Внутренний div с классом skill охватывает каждый измеряемый навык.

Класс skillbar будет у нас отвечать за анимацию.


 <div id="w">
    <div id="content">
      <h1>Анимация панелей личных умений</h1>
      
      <div id="skillset">
        <h2>Анимированные панели</h2>
        <div class="skill">
          <h3>HTML5/CSS3 <sup>(100%)</sup></h3>
          <span class="bar"><span class="skillbar htmlcss">8 лет</span></span>
        </div>

Расположение элементов

Теперь начнем со стилизации элементов.

Контейнер с классом bar использует фиксированное значение ширины и высоты, чтобы гарантировать, что все выглядит одинаково во всех браузерах. Класс skillbar сохраняет значение высоты вместе с текстом, но во втором примере эти элементы span просто не будут отображаться, потому что они пусты. Нам нужно использовать 100% высоты на всех внутренних панелях умений, чтобы они появлялись даже без какого-либо контента.


/** skills bar ui **/

#skillset {
  display: block;
  margin-bottom: 8px;
}
#skillset .skill { display: block; margin-bottom: 20px; } #skillset .skill h3 { display: block; font-size: 1.55em; line-height: 1.4em; margin-bottom: 2px; } #skillset .skill .bar { display: block; height: 25px; line-height: 25px; width: 500px; padding: 3px 4px; -webkit-box-sizing: content-box; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 1px 1px 2px #969492; -moz-box-shadow: 1px 1px 2px #969492; box-shadow: 1px 1px 2px #969492; background-color: #dadada; background-image: -webkit-gradient(linear, left top, left bottom, from(#efeaea), to(#dadada)); background-image: -webkit-linear-gradient(top, #efeaea, #dadada); background-image: -moz-linear-gradient(top, #efeaea, #dadada); background-image: -ms-linear-gradient(top, #efeaea, #dadada); background-image: -o-linear-gradient(top, #efeaea, #dadada); background-image: linear-gradient(top, #efeaea, #dadada); } #skillset .skill .bar .skillbar { display: block; height: 100%; text-align: center; font-weight: bold; font-size: 1.1em; color: #414141; text-shadow: 1px 1px 0 rgba(255,255,255,0.55); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #4cc958; background-image: -webkit-gradient(linear, left top, left bottom, from(#68e574), to(#4cc958)); background-image: -webkit-linear-gradient(top, #68e574, #4cc958); background-image: -moz-linear-gradient(top, #68e574, #4cc958); background-image: -ms-linear-gradient(top, #68e574, #4cc958); background-image: -o-linear-gradient(top, #68e574, #4cc958); background-image: linear-gradient(top, #68e574, #4cc958); } #skillset .skill .bar .skillbar small { font-size: 0.85em; padding-left: 3px; vertical-align: top; }

Анимация

Использование ключевого слова forwards заставит каждый элемент сохранять стили CSS, найденные в последнем ключевом кадре. Так что в этом случае мы запускаем разные анимации для каждого класса, и каждая анимация имеет начальную позицию 0%, за которой следует позиция, завершенная на 100%.


#skillset .skill .bar .htmlcss {
  -moz-animation: htmlcss 1.5s ease-in-out forwards;
  -webkit-animation: htmlcss 1.5s ease-in-out forwards;
  animation: htmlcss 1.5s ease-in-out forwards;
}
 
#skillset .skill .bar .jquery {
  -moz-animation: jquery 1.5s ease-in-out forwards;
  -webkit-animation: jquery 1.5s ease-in-out forwards;
  animation: jquery 1.5s ease-in-out forwards;
}
 
#skillset .skill .bar .phpmysql {
  -moz-animation: phpmysql 1.5s ease-in-out forwards;
  -webkit-animation: phpmysql 1.5s ease-in-out forwards;
  animation: phpmysql 1.5s ease-in-out forwards;
}
 
#skillset .skill .bar .wordpress {
  -moz-animation: wordpress 1.5s ease-in-out forwards;
  -webkit-animation: wordpress 1.5s ease-in-out forwards;
  animation: wordpress 1.5s ease-in-out forwards;
}
 
#skillset .skill .bar .woocommerce {
  -moz-animation: woocommerce 1.5s ease-in-out forwards;
  -webkit-animation: woocommerce 1.5s ease-in-out forwards;
  animation: woocommerce 1.5s ease-in-out forwards;
}

Завершение ключевых кадров

Последний блок кода - это ключевые кадры. Мы даем каждой настройке ключевого кадра уникальное имя, которое представлено более ранними свойствами анимации. Я использую префиксы CSS3 для -moz и -webkit для обеспечения соответствия как можно большему числу версий браузера. Каждая анимация разбиты на блоки, сгруппированные по имени анимации.


/** CSS3 keyframes **/
@-moz-keyframes htmlcss {
  0%   { width: 35px; }
  100% { width: 100%; }
}
@-webkit-keyframes htmlcss {
  0%   { width: 35px; }
  100% { width: 100%; }
}
@keyframes htmlcss {
  0%   { width: 35px; }
  100% { width: 100%; }
}
 
 
@-moz-keyframes phpmysql {
  0%   { width: 45px; }
  100% { width: 70%; }
}
@-webkit-keyframes phpmysql {
  0%   { width: 45px; }
  100% { width: 70%; }
}
@keyframes phpmysql {
  0%   { width: 45px; }
  100% { width: 70%; }
}
 
 
@-moz-keyframes jquery {
  0%   { width: 45px; } 
  100% { width: 55%; }
}
@-webkit-keyframes jquery {
  0%   { width: 45px; } 
  100% { width: 55%; }
}
@keyframes jquery {
  0%   { width: 45px; } 
  100% { width: 55%; }
}
 
 
@-moz-keyframes wordpress {
  0%   { width: 35px; } 
  100% { width: 65%; }
}
@-webkit-keyframes wordpress {
  0%   { width: 35px; } 
  100% { width: 65%; }
}
@keyframes wordpress {
  0%   { width: 35px; } 
  100% { width: 65%; }
}
 
 
@-moz-keyframes woocommerce {
  0%   { width: 35px; } 
  100% { width: 35%; }
}
@-webkit-keyframes woocommerce {
  0%   { width: 35px; } 
  100% { width: 35%; }
}
@keyframes woocommerce {
  0%   { width: 35px; } 
  100% { width: 35%; }
}

На этом урок заканчивается. У нас получилась красивая и анимированная панель личных умений.