Разумное использование градиентов для достижения высокого уровня анимации фонового света

внешний интерфейс JavaScript CSS
Разумное использование градиентов для достижения высокого уровня анимации фонового света

задний план

в предыдущем постеИнтеллектуальное использование фильтров для достижения высокоуровневого эффекта мгновенного переключения текста.В , мы уже упоминали об очень интересном анимационном эффекте отображаемого текста Apple.

В этой статье мы расскажем об еще одном интересном эффекте, используя градиенты для достижения высокоуровневой анимации фонового света. Этот эффект относится кОфициальный сайт Apple iPhone 13 Proвводная страница:

141609598-e0a1e420-2967-4ce4-8086-bfef1233f5f6.gif

выполнить

Этот эффект трудно воспроизвести полностью с помощью CSS. Тень светового эффекта, смоделированная CSS, будет относительно низкой, и можно сказать, что она будет восстановлена ​​в максимально возможной степени.

На самом деле, каждая группа источников света в основном одинакова, поэтому нам нужно реализовать только один из них, и мы можем добиться почти всего эффекта.

Обратите внимание на этот эффект:

Его ядро ​​на самом делеугловой градиент -- conic-gradient(), с помощью углового градиента можно примерно добиться такого эффекта:

<div></div>

div {
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at 400px 300px,
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            transparent),
            linear-gradient(-45deg, #060d5e, #002268);
}

Взгляните на эффект:

Вроде того. Конечно, если вы внимательно наблюдаете, цвет градиента заканчивается не от одного цвета к прозрачности, а от цвета А -- прозрачного -- к цвету Б, так что другая половина источника света не будет такой тупой, модифицированный CSS-код:

div {
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at 400px 300px,
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            hsla(219deg, 90%, 80%, .5) 100%),
            linear-gradient(-45deg, #060d5e, #002268);
}

Мы добавили дополнительный цвет в конце углового градиента, чтобы лучше выглядеть:

эмм, здесь мы найдем, что простоугловой градиент conic-gradient()Этого недостаточно, он не может имитировать эффект тени от источника света, поэтому он должен использовать другие свойства для достижения эффекта тени от источника света.

Здесь мы, естественно, будем думать оbox-shadow. Вот трюк, используя несколькоbox-shadow, чтобы добиться эффекта неоновых огней.

Давайте добавим div для реализации световых теней через него:

<div class="shadow"></div>

.shadow {
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow: 
        0px 0 .5px hsla(170deg, 95%, 80%, 1),
        0px 0 1px hsla(170deg, 91%, 80%, .95),
        0px 0 2px hsla(171deg, 91%, 80%, .95),
        0px 0 3px hsla(171deg, 91%, 80%, .95),
        0px 0 4px hsla(171deg, 91%, 82%, .9),
        0px 0 5px hsla(172deg, 91%, 82%, .9),
        0px 0 10px hsla(173deg, 91%, 84%, .9),
        0px 0 20px hsla(174deg, 91%, 86%, .85),
        0px 0 40px hsla(175deg, 91%, 86%, .85),
        0px 0 60px hsla(175deg, 91%, 86%, .85);
}

Хорошо, свет есть, но проблема в том, что нам нужен свет только с одной стороны, что нам делать? Есть много способов вырезать, здесь я представляю использованиеclip-pathМетод отсечения любого пространства элементов:

.shadow {
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow: .....;
    clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
}

Принцип таков:

Таким образом, мы получаем свет с одной стороны:

Тут, собственно, в CSS тоже есть способ добиться односторонних теней (Уловки и детали CSS-теней, о которых вы не знали), но на самом деле эффект не очень хороший, и, наконец, принимается вышеуказанная схема.

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

image

В этот раз уже очень похоже. Следующее, что нужно сделать, это заставить весь узор двигаться. Здесь тоже много приемов.Ядро по-прежнему использует CSS @Property для реализации анимации углового градиента и позволяет перекрывать световую анимацию и угловой градиент.

Нам нужно использовать CSS @Property для преобразования градиента кода.Основной код выглядит следующим образом:

<div class="wrap">
    <div class="shadow"></div>
</div>

@property --xPoint {
  syntax: '<length>';
  inherits: false;
  initial-value: 400px;
}
@property --yPoint {
  syntax: '<length>';
  inherits: false;
  initial-value: 300px;
}

.wrap {
    position: relative;
    margin: auto;
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at var(--xPoint) var(--yPoint),
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            hsla(219deg, 90%, 80%, .5) 100%),
            linear-gradient(-45deg, #060d5e, #002268);
    animation: pointMove 2.5s infinite alternate linear;
}

.shadow {
    position: absolute;
    top: -300px;
    left: -330px;
    width: 430px;
    height: 300px;
    background: #fff;
    transform-origin: 100% 100%;
    transform: rotate(225deg);
    clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
    box-shadow: ... 此处省略大量阴影代码;
    animation: scale 2.5s infinite alternate linear;
}
 
@keyframes scale {
    50%,
    100% {
        transform: rotate(225deg) scale(0);
    }
}

@keyframes pointMove {
    100% {
        --xPoint: 100px;
        --yPoint: 0;
    }
}

Таким образом, мы добились полной анимации света:

Давайте реорганизуем шаги для достижения такой анимации:

  1. Используйте угловые градиентыconic-gradientБазовая рамка построена, и здесь также используется несколько градиентов с темным цветом фона за угловым градиентом;
  2. использовать несколькоbox-shadowРеализовать световые и теневые эффекты (также известные как неоновые эффекты)
  3. использоватьclip-pathОбрезать любую область элемента
  4. Анимация градиентов с помощью CSS @Property

Остальная работа заключается в повторении вышеперечисленных шагов, добавлении других градиентов и источников света, отладке анимации и, наконец, мы можем получить вот такой простой эффект симуляции:

Поскольку первоначальный эффект.mp4, не может получить точный цвет, не может получить параметры тени, в котором цвет напрямую используется образец для выбора цвета, тень моделируется более небрежно, если есть исходный файл и точные параметры, это может быть моделируется более реалистично.

Вы можете нажать здесь для получения полного кода:CodePen -- iPhone 13 Pro Gradient

наконец

Эта статья больше о радости от картинки.На практике должно быть более изящное решение вышеуказанного эффекта, а если использовать CSS симуляцию, то должен быть способ получше. , 3, 4 Некоторые из самих навыков стоит учиться.

Хорошо, это конец этой статьи, я надеюсь, что эта статья поможет вам :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

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

Категории