Используйте закругленные углы CSS для создания интересных анимаций загрузки.

анимация CSS

Как фронтенд-инженер, вы должныcssНавыки имеют достаточное исследование и понимание, а затем автор поможет вам освоить, как использоватьcssЗакругленные свойства углов для достижения немного интересногоанимация загрузки.

Если вы хотите узнать большеcssЗа практическими советами можно обратиться к следующим статьям автора:

Свойство CSS border и свойство border-radius

Автор также поделился в предыдущей статье, как использоватьborderНиже приведена схематическая диаграмма для получения различных форм, таких как треугольники:Используя этот принцип, нам нужно только поместить элементborder-radiusУстановите круг (например, 50%), можем ли мы получить круговую диаграмму? Давайте посмотрим на эффект:Вышеупомянутое, чтобы установить сторонуborder-colorпосмотрите и установите четыре стороныborder-colorПохоже, так говорят, чтобы реализовать круговую диаграмму с помощьюcssЭтого достаточно, код выглядит следующим образом:

.rotate-animate {
    border:100px solid #f3f3f3;
    border-radius:50%;
    border-top:100px solid #2842d8;
}

Если вы хотите получить круговые диаграммы с разными пропорциями, на самом деле, пока вы их разумно рассчитываетеborder-widthЗатем, с вышеуказанными знаниями, мы объединяемanimationМожет ли анимация добиться следующей анимации загрузки?

cssкод показывает, как показано ниже:

.rotate-animate {
    border:100px solid #f3f3f3;
    border-radius:50%;
    border-top:100px solid #2842d8;
    animation:rotate 2s linear infinite;
}
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

мы делаемcss3Часто используется в анимацииtransformа такжеanimation, поэтому рекомендуется освоить эти два свойства.

Дополнение: Если вы хотите добиться формы веера, это тоже очень просто?

Реализовать более элегантную анимацию загрузки кольца.

С вышеуказаннымcssЗнания, давайте еще раз подумаем, как реализовать кольцо с кратчайшим кодом? На самом деле все очень просто, мы использовали закругленные углы иborderделать круговые и круговые диаграммы, если мы задаем ширину элементаwidthи высотаheight, а фон прозрачный, что будет, посмотрим:

код показывает, как показано ниже:

.rotate-animate {
    border:16px solid #f3f3f3;
    border-radius:50%;
    border-top:16px solid #2842d8;
    width:100px;
    height:100px;
}

Затем мы делаем анимацию загрузки кольца, которая очень проста.Используя анимацию вращения, написанную выше, давайте посмотрим на эффект:

Весь код анимации загрузки кольца выглядит следующим образом:

<style>
    .rotate-animate {
        border:16px solid #f3f3f3;
        border-radius:50%;
        border-top:16px solid #2842d8;
        width:100px;
        height:100px;
        animation:rotate 2s linear infinite;
    }
    .rotate-animate.fill-color {
        margin-left: 20px;
        border-color: #2842d8 #d1b516 #cf4928 #27c965;
    }
    @keyframes rotate{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform:rotate(360deg);
        }
    }
</style>
<!-- html -->
<div class="rotate-animate"></div>
<div class="rotate-animate fill-color"></div>

Мы также можем использовать эту функцию для получения более интересных шаблонов и анимации загрузки, вы можете попробовать это тщательно Автор рекомендует 2 статьи для сравнения.cssстатья:

Есть также несколько низкоуровневых статей по CSS, которые могут ссылаться на мои предыдущие статьи.

Журнал изменений проекта с открытым исходным кодом

В настоящее времяH5-DooringПлатформа визуального построения все еще обновляется, основные обновления следующие:

  • Добавьте компоненты карты, чтобы настроить информацию о географическом местоположении и метки.
  • Исправлена ​​проблема, из-за которой библиотека изображений не отображалась
  • Добавить компонент календаря
  • Оптимизирована функция перетаскивания и загрузки кода

(Редактор H5) H5-Dooring | Создание страниц H5 в строительных блоках

Рекомендовано в прошлом

13+ распространенных проблем и решений, возникающих при рассмотрении проектов узлов

Как быстро разработать страницы H5 со строительными блоками?

Онлайн-генератор треугольников css вручную

js, необходимая для эффективной фронтенд-разработки

найти его полезным? Добавьте в избранное, если вам это нравится, и, кстати, поставьте лайк Ваша поддержка - моя самая большая поддержка! Найдите «Интересный интерфейс» на WeChat и найдите больше интересных знаний о интерфейсе и реальных сражениях с играми H5, webpack, node, gulp, css3, javascript, nodeJS, визуализацией данных на холсте и т. д.

Категории