В этой предыдущей статье --Магия одной строки кода CSSВ , мы представили замечательный (и, возможно, более подходящий) фон, который можно создать с помощью одной строки кода CSS.
В этой статье я продолжу знакомить вас с некоторыми интересными знаниями о фоне.Используя очень маленькие единицы, всего несколько строк кода могут создавать замечательные и интересные фоновые эффекты~
Влияние порядков на фоновую графику
Главные герои этой статьи:
- Повторяющийся радиальный градиент
- Повторяющийся конический градиент
чтоПорядок величины по сравнению с фоновой графикойШерстяная ткань? Давайте посмотрим на это интересное явление:
Мы используемrepeating-conic-gradientГрадиент с несколькими углами реализует график, код очень прост, как показано ниже:
<div></div>
div {
width: 100vw;
height: 100vh;
background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}
Буду30degзаменить0.1deg
Затем мы заменяем приведенный выше код очень маленьким значением30deg, что-то вроде этого:
{
background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}
Что это за штука? Подумайте, как будет выглядеть график, нарисованный этой строкой кода?
Взгляните на эффект:
Вау, невероятно. здесь0.1degОчень критично, чем меньше здесь угол (лучше меньше 1града), тем круче графика, то есть влияние на фоновую графику на порядок.
CodePen -- One Line CSS Pattern
Смотреть изменениям с CSS @Property
Раньше, если мы напрямую написали следующий переходный код, мы не смогли получить анимацию Tweened переходной анимации, только анимация кадров:
div{
background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
transition: background 1s;
}
div:hover {
background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}
Только такой эффект можно получить, т.к.CSS не поддерживает прямую анимацию перехода для таких сложных градиентов.:
Хорошо, затем используйте его в этой статье --CSS @property делает невозможное возможнымпредставилCSS @propertyзнания, мы можем использоватьCSS @propertyНаблюдайте за процессом изменения их двух состояний.
Просто преобразуйте код, основной код выглядит следующим образом:
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0.1deg;
}
div{
background: repeating-conic-gradient(#fff, #000, #fff var(--angle));
transition: --angle 2s;
}
html:hover {
--angle: 30deg;
}
Ничего себе, чтобы найти влияние единиц разного порядка на этом графике, я получил очень волшебный эффект анимации перехода. Настоятельно рекомендуется перейти в DEMO, чтобы ощутить эффект понижающей конверсии:
CodePen -- переход шаблона CSS с повторяющимся коническим градиентом (только Chrome 85+)
пройти черезCSS @propertyРеализована анимация перехода между кадрами, см.30degприбыть0.1degПроцесс изменения , мы можем примерно видеть, что малая единица0.1degКак повлиять на графику.
При этом, чем меньше блок, тем больше деталей у картинки, можно попробовать самому.
Множественные радиальные градиенты и множественные угловые градиенты Создавайте интересные фоны с небольшими элементами
Используя некоторые из приведенных выше советов, мы можем создать очень интересные фоновые изображения, используя несколько радиальных градиентов (повторяющийся-радиальный-градиент) и несколько угловых градиентов (повторяющийся-конический-градиент).
Просто перечислить некоторые:
div {
background-image: repeating-radial-gradient(
circle at center center,
rgb(241, 43, 239),
rgb(239, 246, 244) 3px
);
}
div {
background-image: repeating-radial-gradient(
circle at 15% 30%,
rgb(4, 4, 0),
rgb(52, 72, 197),
rgb(115, 252, 224),
rgb(116, 71, 5),
rgb(223, 46, 169),
rgb(0, 160, 56),
rgb(234, 255, 0) 2px
);
}
div {
background-image: repeating-radial-gradient(
circle at center center,
rgb(81, 9, 72),
rgb(72, 90, 223),
rgb(80, 0, 34),
rgb(34, 134, 255),
rgb(65, 217, 176),
rgb(241, 15, 15),
rgb(148, 213, 118) 0.1px
);
}
div {
background-image: repeating-radial-gradient(
ellipse at center center,
rgb(75, 154, 242),
rgb(64, 135, 228),
rgb(54, 117, 214),
rgb(43, 98, 200),
rgb(33, 79, 185),
rgb(22, 60, 171),
rgb(12, 42, 157),
rgb(1, 23, 143) 0.01px
);
}
Эй, разве это не интересно? Вы можете попробовать более интересную графику самостоятельно. Для полного кода DEMO, вы можете ткнуть его здесь, чтобы увидеть:
CodePen Demo -- Magic Gradient Art
Насколько маленьким он может быть?
repeating-radial-gradientэто похоже наradial-gradient()И принимает те же параметры, но повторяет цвет во всех направлениях, чтобы покрыть весь свой контейнер.
Возьмем в качестве примера следующий код, где точка завершения одного графа рисования1px, которому посвящена эта статья, насколько маленьким он может быть?
:root {
--length: 1px
}
{
background-image: repeating-radial-gradient(
circle at 17% 32%,
rgb(4, 4, 0),
rgb(52, 72, 197),
rgb(115, 252, 224),
rgb(116, 71, 5),
rgb(223, 46, 169),
rgb(0, 160, 56),
rgb(234, 255, 0) var(--length)
);
}
Я из100pxприбыть0.00001pxДля сравнения построено 8 графиков:
существует0.001pxприбыть0.0001pxНа этом интервале граф в основном выродился в граф частиц, и контур радиального градиента не виден.0.00001pxЭтот уровень фактически выродился в сплошную цветную картинку!
Анимация шума телевизионной снежинки с использованием повторяющегося радиального градиента
В приведенном выше DEMO мы обнаружили, что когда0.001pxприбыть0.0001pxэтот интервал,repeating-radial-gradientВ основном вырождаются в графику частиц:
{
background-image: repeating-radial-gradient(
circle at 17% 32%,
rgb(4, 4, 0),
rgb(52, 72, 197),
rgb(115, 252, 224),
rgb(116, 71, 5),
rgb(223, 46, 169),
rgb(0, 160, 56),
rgb(234, 255, 0) 0.0008px
);
}
Не очень ли это похоже на эффект снежного экрана телевизора? тонкая настройка0.0008pxПо этому параметру, используя несколько кадров разных анимаций, мы можем получить анимацию шума телевизионной снежинки.
Ага, очень интересно, вы можете нажать здесь, чтобы увидеть полный исходный код:
Copepen Demo -- PURE CSS TV NOISE EFFECT (Only Chrome 85+)
наконец
Что могут сделать несколько строк фонового кода? Определенно больше, чем это, конечно, не в этом ли удовольствие от CSS. Если вы хотите получить самую интересную информацию о CSS, не пропустите мою общедоступную учетную запись iCSS —Интересные факты о внешнем интерфейсе iCSS
Ну вот и конец этой статьи, надеюсь она вам поможет :)
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.