<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 3.0

PHP и MySQL с Нуля до Гуру 3.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 9 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

В курсе Вы узнаете всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

В Бонусе «Создание сайта для библиотеки» Вы увидите применение знаний из основного курса при создании полноценного проекта.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Круговой индикатор выполнения с HTML и CSS. Часть 3

Круговой индикатор выполнения с HTML и CSS. Часть 3

Здравствуйте! Продолжаем создание кругового прогрессбара с помощью HTML и CSS. В прошлой статье мы создали круг на белом фоне и закрасили одну его половину синим цветом. И в сегодняшней статье мы закрасим вторую половину.

Вторая половина круга. Теперь нам нужно сделать вторую половинку. Количество цвета, видимого в данной части, также определяется клипом: rect (0px, 150px, 150px, 75px). Затем добавим анимацию и активируем ее с помощью @keyframes. Время анимации ограничим 3 секундами. Мы знаем, что круг формируется на 360 градусов. Так как здесь мы разделили индикатор выполнения круга CSS на две части, поэтому каждая часть составляет 180 градусов. Здесь мы установили 135-градусную анимацию для каждой части с помощью Transform. Таким образом, это будет 270 градусов для полного круга. Здесь мы хотим увеличить анимацию до 75%, поэтому я использовал 270 градусов.

Добавим код в HTML:



<body>
<div class="circle-wrap">
  <div class="circle">
 <div class="mask half">
    <div class="fill"></div>
  </div>

  <!-- Добавленные строки -->
  <div class="mask full">
   <div class="fill"></div>
  </div>


  </div>

</div>

</body>

Добавим код в файл стилей CSS:


/* (360/100) * 75 = 270 */

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}

.mask.full,
.circle .fill {
  animation: fill ease-in-out 3s;
  transform: rotate(135deg);
}

@keyframes fill{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(135deg);
  }
}


Результат


Изображение

Таким образом, мы создали анимацию внутри прогрессбара с помощью свойства @keyframes в CSS.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.