Шаг за шагом посмотрите, с какими эффектами анимации зарядки вы можете работать, используя только CSS.
нарисовать батарею
Конечно, чтобы зарядить батарею, вы должны сначала нарисовать батарею с помощью CSS, это не сложно, просто сделайте ее:
О, его почти нет. Теперь, когда у вас есть аккумулятор, вы можете заряжать его напрямую. Простейшая анимация, которая должна заполнять всю батарею цветом.
Методов много, и код тоже очень простой, просто посмотрите на эффект напрямую:
Есть внутренний вкус.Если требования не высокие, то это нежелание можно переступить. Мощность представлена синим градиентом, а анимация зарядки реализована анимацией смещения цветового блока. Но всегда было ощущение, что чего-то не хватает.
Добавлены оттенки и цветовые вариации
Если вы хотите продолжить оптимизацию, вам нужно добавить некоторые детали.
Мы знаем, что, когда низкая батарея, мощность обычно экспрессируется, выраженная, выраженная как зеленая красная, высокая мощность. Добавьте изменения цвета, чтобы дать всю точку тени, чувствуя дыхание, так что эффект зарядки выглядит действительно двигаться.
Точка знаний
Здесь, по сути, есть только один пункт знаний:
- Используйте filter: hue-rotate(), чтобы анимировать цветовой переход цвета градиента.
Мы не можем напрямую анимировать градиентный цвет, здесь оттенок настраивается через фильтр, таким образом реализуя анимацию трансформации градиентного цвета.
Полная демонстрация приведенного выше примера:CodePen Demo -- Battery Animation One
добавить волны
ладно, просто засчитали как небольшую веху, а потом пошли дальше. Верхняя часть батареи представляет собой прямую линию, и она кажется немного тусклой. Здесь мы сделаем преобразование. Если верхнюю линию можно изменить на волнистую катушку, эффект будет более реалистичным.
Эффект после трансформации:
Использование CSS для достижения этого эффекта волнистым прокруткой на самом деле является просто повязку. Специфика можно найти в этой статье, которую я писал ранее:
Чистый CSS для достижения эффекта волны!
Точка знаний
Одним из пунктов знаний здесь является упомянутое выше использование CSS для достижения простого эффекта волны, которого можно добиться с помощью завязывания глаз.Просто посмотрите на картинку, и вы поймете:
Полная демонстрация приведенного выше примера:CodePen Demo -- Battery Animation Two
Хорошо, к этому вышеперечисленные эффекты плюс цифровые изменения уже являются более хорошим эффектом. Конечно, приведенный выше эффект выглядит все еще очень CSS, это нужно посмотреть, сможете ли вы сделать это с помощью CSS.
Анимируйте зарядку Android с помощью мощных фильтров CSS
А что насчет этого ниже?
Студенты, которые используют телефоны Android, конечно, не чужие.Это эффект телефонов Android при зарядке. Когда я это увидел, мне стало любопытно, можно ли это сделать с помощью CSS?
После некоторых попыток я обнаружил, что использование CSS также может очень хорошо имитировать этот эффект анимации:
Визуализация приведенных выше записей Gif полностью смоделирована с использованием CSS.
Полная демонстрация приведенного выше примера:HuaWei Battery Charging Animation
Точка знаний
Разбирайте очки знаний, главное их использоватьfilter: contrast()так же какfilter: blur()Эти два фильтра могут очень хорошо достичь такого эффекта слияния.
Выньте два фильтра отдельно, и их функции:
-
filter: blur(): установка эффекта размытия по Гауссу на изображении. -
filter: contrast(): регулировка контрастности изображения.
Однако, когда они «подходят», происходит чудесное явление слияния.
Начнем с простого примера:
Посмотрите внимательно на процесс пересечения двух кругов.При соприкосновении края с краем будет производиться эффект слияния границ.Размытый край размытия по Гауссу устраняется через контрастный фильтр, а размытие по Гауссу используется для достижения эффекта слияния.
Конечно, этот эффект неоднократно упоминался в предыдущих статьях, подробнее можно посмотреть здесь:
изменение цвета
Конечно, сюда же можно добавить трансформацию цвета, эффект тоже очень хороший:
Полная демонстрация приведенного выше примера:HuaWei Battery Charging Animation
легко упускаемый момент
регулируяfilter: blur()а такжеfilter: contrast()Значение атрибута и эффект анимации на самом деле будут меняться в значительной степени, а хороший эффект требует постоянной отладки. Конечно, очень большую роль в этом играет и опыт, в конце концов, надо еще постараться.
наконец
Эффекты нескольких анимаций зарядки, приведенных в этой статье, постепенно улучшаются.В этой статье указаны только основные точки знаний. Однако в фактическом процессе вывода есть множество мелких деталей, которые не упоминаются в этой статье.
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Ну вот и конец этой статьи, надеюсь она вам поможет :)
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.