Удивительно! ! Может ли CSS также достичь сияния?

внешний интерфейс JavaScript CSS
Удивительно! ! Может ли CSS также достичь сияния?

После написания этой статьи в прошлый раз --Разумное использование градиентов для достижения высокого уровня анимации фонового светаПосле этого в комментариях под статьей одноклассники оставляют сообщение,Можно ли добиться сияния с помощью CSS??

Так:

эммм, это немного смущает. Впрочем, я тоже недавно пробовал.Хотя смоделировать такой реальный эффект невозможно, все же можно использовать CSS для создания некоторых подобных спецэффектов.Сегодня мы попробуем это вместе.

Посмотрев несколько изображений полярного сияния, я обнаружил несколько наиболее важных элементов в анимации полярного сияния:

  1. Яркие градиентные цвета на темном фоне
  2. Анимация похожа на течение водяных волн

Яркие градиентные цвета, которые мы можем использовать как можно большеГрадиентмоделирование. И анимационный эффект волн на воде в фильтре SVG.feturbulenceОн посвящен этому, и использование этого фильтра неоднократно упоминалось во многих моих прошлых статьях.

В дополнение к градиентам, SVG<feturbulence>В дополнение к фильтрам мы также можем использоватьрежим смешивания(mix-blend-mode), фильтры CSS и т. д.

Хорошо, после того, как у вас появится общее представление, остальное — продолжать попытки.

Шаг 1. Нарисуйте темный фон

Во-первых, нам может понадобиться темный фон для представления нашего ночного неба. В то же время украсьте некоторые звезды, звезды можно использоватьbox-shadowСмоделируйте таким образом фон ночного неба, который мы можем сделать в 1 div:

<div class="g-wrap">
</div>
@function randomNum($max, $min: 0, $u: 1) {
	@return ($min + random($max)) * $u;
}

@function shadowSet($n, $size) {
    $shadow : 0 0 0 0 #fff;
    
    @for $i from 0 through $n { 
        $x: randomNum(350);
        $y: randomNum(500);
        $scale: randomNum($size) / 10;
        
        $shadow: $shadow, #{$x}px #{$y}px 0 #{$scale}px rgba(255, 255, 255, .8);
    }
    
    @return $shadow;
}

.g-wrap {
    position: relative;
    width: 350px;
    height: 500px;
    background: #0b1a3a;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 1px;
        border-radius: 50%;
        box-shadow: shadowSet(100, 6);
}

Этот шаг относительно прост, с помощью SASS мы можем получить такое фоновое изображение ночного неба:

Шаг 2. Используйте градиенты, чтобы обвести северное сияние

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

По сути, это радиальный градиент:

<div class="g-wrap">
  <div class="g-aurora"></div>
</div>
.g-aurora {
    width: 400px;
    height: 300px;
    background: radial-gradient(
        circle at 100% 100%,
        transparent 45%,
        #bd63c1 55%,
        #53e5a6 65%,
        transparent 85%
    );
}

Шаг 3. Поверните растяжку

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

.g-aurora {
    ...
    transform: rotate(45deg) scaleX(1.4);
}

Вероятно, мы можем получить что-то вроде этого:

Шаг 4. Волшебное преобразование режима наложения!

Вот, собственно, и вышел прототип. Но цвета не очень похожи.Чтобы смешаться с темным фоном, здесь мы используем режим наложения.mix-blend-mode.

.g-aurora {
    ...
    transform: rotate(45deg) scaleX(1.4);
    mix-blend-mode: color-dodge;
}

Случилось что-то волшебное, посмотрите на эффект:

image

Общий цвет больше похож на цвет полярного сияния.

Шаг 5. Наложение SVG-фильтра фенотипа

Затем мы хотим создать эффект ряби на воде, нам нужно использовать SVG.<feturbulence>Фильтр, если вы мало знаете об этом фильтре, вы можете ознакомиться с этими моими статьями:

Вернуться к теме. Мы добавляем SVG<feturbulence>Фильтры с использованием CSSfilterЦитировать

<div class="g-wrap">
  <div class="g-aurora"></div>
</div>

<svg id='blob' version='1.1' xmlns='http://www.w3.org/2000/svg'>
    <defs>
        <filter id='wave'>
            <feturbulence basefrequency='0.003 0.003 id='turbulence' numoctaves='3' result='noise' seed='10' />
            <fedisplacementmap id='displacement' in2='noise' in='SourceGraphic' scale='96' />
        </filter>
    </defs>
</svg>
.g-aurora {
    ...
    transform: rotate(45deg) scaleX(1.4);
    mix-blend-mode: color-dodge;
    filter: url(#wave);
}

Мы можем получить такой эффект:

Вау, ты уже это чувствуешь? Благодаря характеристикам фетурбулентности мы почти имитируем эффект полярного сияния!

Шаг 6. Дайте полярному сиянию двигаться

На последнем этапе нам нужно заставить наше сияние двигаться. Поскольку сама анимация SVG не поддерживает что-то вродеanimation-fill-mode: alternateэта характеристика. Нам все еще нужно написать небольшой код JavaScript для управления общим циклом анимации.

Примерный код такой:


var filter = document.querySelector("#turbulence");
var frames = 0;
var rad = Math.PI / 180;

function freqAnimation() {
  bfx = 0.005;
  bfy = 0.005;
  frames += .5
  bfx += 0.0025 * Math.cos(frames * rad);
  bfy += 0.0025 * Math.sin(frames * rad);

  bf = bfx.toString() + ' ' + bfy.toString();
  filter.setAttributeNS(null, 'baseFrequency', bf);
  window.requestAnimationFrame(freqAnimation);
}

window.requestAnimationFrame(freqAnimation);

На данный момент у нас есть полная движущаяся анимация северного сияния:

Некоторые советы и многое другое

  1. Вокруг градиентных элементов будут очевидные сбои границ, вы можете использовать черные внутренние тени.box-shadow: inset ...Удалить;
  2. Фактические параметры каждого атрибута в реальном процессе записи кажутся простыми, но на самом деле они получены после непрерывной отладки в процессе;
  3. Режим наложения и фильтр фетурбулентности SVG сложны в освоении и требуют постоянной практики и постоянной отладки; выбор цвета полярного сияния в этой статье не подвергался многократным отладкам, и вы готовы потратить время на отладку цвета с лучшим эффектом. .

Конечный эффект не идеален, но это также хорошая работа CSS + SVG. Вы можете увидеть полный код здесь:

CodePen Demo -- Aurora

наконец

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

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

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

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