2023-07-16 16:18:12
Анимация в стиле Хэллоуина
Sass - это расширение CSS, которое добавляет много дополнительных возможностей, таких как переменные, вложенность, функции и другие, которые могут упростить и ускорить написание CSS. Sass написан на Ruby и компилируется в обычный CSS. SCSS - это особый тип файла для Sass, который имеет синтаксис, похожий на CSS.
Этот код представляет собой набор инструкций на языке Sass, который является препроцессором CSS. Препроцессоры CSS расширяют возможности обычного CSS, позволяя использовать переменные, функции и другие конструкции для более гибкого и эффективного написания стилей.
Вот, что делает каждая часть кода:
1. Определение переменных:
c - массив цветов.
n - длина массива c.
2. Цикл while
:
Цикл выполняется, пока значение n не станет равным 0.
Для каждой итерации цикла создается элемент с классом .lyr.
Каждому элементу задается атрибут style, в котором используются переменные n и c для установки значения --i и color.
3. Определение функций:
gcd($a, $b) - функция для нахождения наибольшего общего делителя двух чисел.
lcm($a, $b) - функция для нахождения наименьшего общего кратного двух чисел.
4. Определение переменных:
$ua - значение 135.
$lcm - наименьшее общее кратное между $ua и 360.
$m0 - результат деления $lcm на $ua.
$m1 - результат деления $lcm на 360.
5. Стили для элемента body
:
Устанавливаются свойства для контейнера body, включая отображение в виде сетки, отступы, высоту и фон.
6. Стили для элементов с классом .lyr
:
Определяются стили для элементов с классом .lyr, включая размеры, радиус границы, фон с использованием градиента и анимацию.
Анимация mov изменяет позицию фона элемента.
Анимация rot поворачивает элемент на определенный угол.
Этот код создает элементы с классом .lyr и применяет к ним стили, чтобы создать анимированный эффект. Конкретный внешний вид зависит от значений переменных и используемых цветов в массиве c.
Ссылка на код
2.3K views13:18
S
