[CSS3 advanced] меньше реализует анимацию звездного неба

CSS

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

Ссылка для предварительного просмотра и код в моей кодовой ручке:код спрей.IO/ о-монга...

Предварительный просмотр точки знаний

этой статьименьше навыков + css трюкиК пунктам знаний относятся:

  • Как less пишет цикл
  • Как использовать js-выражения в less
  • Свойства CSS3: как box-shadow генерирует сотни звезд
  • Свойства CSS3: фон: радиальный градиент радиальный градиент, как создать цвет фона градиента

Структура HTML-документа

Во-первых, структура файла html очень проста:

<div>
    <div id="start1"></div>
    <div id="start2"></div>
    <div id="start3"></div>
</div>

Первый шаг: радиальный градиент создает градиентный фон

Установите теги html и body

* {
    padding: 0;
    margin: 0;
}

html, body {
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden;
    height: 100%;
}

Эффект следующий:

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

Вот введение радиально-градиентных параметров

  • эллипс Указывает, что я использую градиент эллипса. Вы можете увидеть, как его использовать, посмотрев на картинку ниже.

// 上图的参数是
radial-gradient(ellipse,#ffffff, #6a6a6a)

То есть цвет представляет собой градиент эллипса от белого #ffffff до серого #6a6a6a.

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

// 上图的参数是
radial-gradient(ellipse at bottom,#ffffff, #6a6a6a)

Итак, мы закончили с градиентом.

Шаг 2: Как box-shadow генерирует сотни звезд

Прежде всего, мы должны решить 3 проблемы, во-первых, как написать цикл с меньшим количеством кода, см. следующий код меньшего размера (подробное объяснение находится ниже кода)

2.1 Как less реализует зацикливание

Примеры следующие:

.loop(@counter) when(@counter > 0) {
  .h@{counter} {
    padding: (10px*@counter);
  }
  .loop((@counter - 1)); //递归调用自身
}
div{
  .loop(5);
}

//编译输出
div .h5 {
  padding: 50px;
}
div .h4 {
  padding: 40px;
}
div .h3 {
  padding: 30px;
}
div .h2 {
  padding: 20px;
}
div .h1 {
  padding: 10px;
}
  • .loop(@counter) when(@counter > 0) — это функция в less, что означает, что функция цикла определена
  • @counter — это переменная, переданная в функцию
  • when(@counter > 0) означает, что когда значение переменной @counter > 0, функция будет выполнена
  • .loop((@counter - 1)) это рекурсивный вызов

Итак, мы пришли к выводу, что способ реализации цикла less заключается в рекурсивном вызове определенной функции.

Затем решите вторую проблему, а именно, как писать выражения JS с меньшими затратами.

2.2 Как писать выражения JS меньше

.loop(@counter) when(@counter > 0) {
  padding: ~`@{counter} + Math.round(2.4)`;
  .loop(@counter - 1); //递归调用自身
}
div{
  .loop(2);
}

// 生成代码如下
div {
  padding: 4;
  padding: 3;
}

Итак, мы пришли к выводу, что способ использования js-выражений в less состоит в том, чтобы начать с ~, а затем обернуть выражение ``

Затем решите третью задачу: как использовать свойство box-shadow для создания сотен звезд.

2.3 Как использовать цикл less для создания сотен звездочек свойства box-shadow

Эти звезды на самом деле квадратные точки, мы сначала создаем 4 квадратных точки

// 
div
{
	width:10px;
	height:10px;
	box-shadow: 10px 0px #9bcded, 50px 0px #9bcded, 10px 40px #9bcded, 50px 40px #9bcded;
}

Эффект следующий

Здесь несколько значений box-shadow используются для генерации квадратов

// 比如以下属性10px 0px #9bcded 表示，在相对于div元素x轴10px，y轴0px处有一个#9bcded颜色的小点
// 因为div本身是width 10px height 10px 是一个正方形，所以它的box-shadow也是正方形
box-shadow: 10px 0px #9bcded,
width:10px;
height:10px;

Затем нам нужно объединить цикл less, чтобы создать больше квадратов (звезд) на тени блока:

// 首先定义个mixin函数，参数是@n, 条件是只有@n > 0的时候才执行函数里的代码
.mixin(@n) when(@n > 0) {
    box-shadow+ : ~`Math.round(Math.random() *  2000) + 'px' + ' ' +Math.round(Math.random() *  2000) + 'px #FFF' `;
    .mixin((@n - 1));
 }

Вышеупомянутая функция в основном находится в box-shadow, которая в основном включает 3 параметра.

  • Сгенерированные значения для оси X — это случайные числа 0-2000 (Math.round(Math.random() * 2000) + 'px')
  • Сгенерированные значения оси Y, которые являются случайными числами от 0 до 2000 (Math.round(Math.random() * 2000) + 'px #FFF' `)
  • Цвет #FFF

Если мы вызовем mixin(100), он сгенерирует 100 белых квадратов (звезд) на фоне 2000 * 2000

Шаг 3: Объедините HTML для создания звезд

之前html结构如下
<div>
    <div id="start1"></div>
    <div id="start2"></div>
    <div id="start3"></div>
</div>

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

// start1生成了长1px，宽1px的星星700个，这是小星星
// 小星星代表距离远的星星，大星星代表距离近的，这样就有了空间感
#start1 {
    .mixin(700);
    width: 1px;
    height: 1px;
    animation: animStar 50s linear infinite;
    animation-delay:-10s;
}
// start2生成了长2px，宽2px的星星200个
#start2 {
    .mixin(200);
    width: 2px;
    height: 2px;
    animation: animStar 100s linear infinite;
    animation-delay:-8s;
}
// start3生成了长3px，宽3px的星星100个
#start3 {
    .mixin(100);
    width: 3px;
    height: 3px;
    animation	: animStar 150s linear infinite;
    animation-delay:-5s;
}
// 动画效果如下
@keyframes animStar {
    from { transform: translateY(0px) }
    to { transform: translateY(-2000px) }
}

В конце этой статьи вы можете пойти в codepen, чтобы попробовать эффект, хе-хе

Категории