CSS-трюки — цветовой градиент и динамический градиент

CSS

Градиенты уже очень распространены.Как сделать градиенты динамичными или сделать их более крутыми?

css градиент

Градиент, установленный в CSS, представляет собой тип данных градиента, который является специальным типом данных изображения. использоватьbackground-imageНастройки, можно накладывать несколько настроек;

CSS3 определяет два типа градиентов:

Линейный градиент linear-gradient()

Реализация градиента состоит из двух частей: линии градиента и цветовой остановки. Линия градиента используется для управления направлением, в котором возникает градиент; точка цвета содержит значение цвета и положение для управления изменением цвета градиента. Браузер плавно меняет цвет каждой цветовой точки на следующую, чтобы создать плавный градиент.Можно сделать несколько цветовых точек для создания эффекта многоцветного градиента. Уже принято использовать градиенты для фона:

background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);

направление

сверху вниз (по умолчанию)

.foo {
    width: 100px;
    height: 100px;
    background: linear-gradient(green, yellow);
}

слева направо

То же самое справа налево. В целях совместимости разные браузеры пишут по-разному:

.foo {
    background: linear-gradient(to right, green, yellow); /* 标准的语法 */
    background: -webkit-linear-gradient(left, green, yellow); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, green, yellow); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, green, yellow); /* Firefox 3.6 - 15 */
}

Диагональ

.foo {
    background: linear-gradient(to bottom right, green, yellow); /* 标准的语法 */
    background: -webkit-linear-gradient(left top, green, yellow); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, green, yellow); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, green, yellow); /* Firefox 3.6 - 15 */
}

угол (градус)

0 градусов создаст градиент снизу вверх, 90 градусов создаст градиент слева направо.

колор-стоп

Состоит из значения цвета, за которым следует необязательная конечная позиция (либо значение в процентах, либо длина по оси градиента).

Цвета по умолчанию распределяются равномерно, если положение не задано.

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

.foo {
    width: 200px;
    height: 100px;
    background: linear-gradient(to right, green, white 10%, yellow);
    /* background: linear-gradient(to right, green, white 20px, yellow); 等同 */
}

Используйте проценты:

Используйте длину:

Белый цвет в середине начинает смещаться от 10% положения контейнера, сжимая зеленую область;

радиальный градиент радиальный градиент()

.foo {
    background-image: radial-gradient(shape size at position, start-color, ..., last-color);
}

shape

  • эллипс (по умолчанию): эллипс

  • круг: круговой

.foo {
    background-image: radial-gradient(red, yellow, green);
}

.foo {
    background-image: radial-gradient(circle, red, yellow, green);
}

size

Определите размер градиента:

  • дальний угол (по умолчанию): определяет длину радиального градиента от центра круга до самого дальнего угла от центра круга.

    .foo {
    background-image: radial-gradient(ellipse farthest-corner at 80px 50px, red, yellow, green);
}

  • ближайшая сторона : Форма края градиента касается стороны контейнера, ближайшей к центру градиента (круг), или, по крайней мере, касается вертикальной и горизонтальной сторон, ближайших к центру градиента (эллипс). .

    .foo {
    background-image: radial-gradient(closest-side at 80px 50px, red, yellow, green);
}

.bar {
    background-image: radial-gradient(circle closest-side at 80px 50px, red, yellow, green);
}

    Эллипс градиента касается вертикального и горизонтального краев, ближайших к центральной точке:

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

  • ближайший угол: определяет длину радиального градиента от центра круга до ближайшего угла к центру круга.

  • дальняя сторона : в отличие от ближайшей стороны, форма края является касательной к стороне контейнера, которая находится дальше всего от центральной точки градиента (или самых дальних вертикальных и горизонтальных сторон).

position

position похоже на background-position или transform-origin. По умолчанию по умолчанию используется центральная точка.

color

Подобно линейному градиенту, цвет + процентное значение или длина;

повторяющийся градиент

repeating-linear-gradient()

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

background-image: repeating-linear-gradient(90deg, red, yellow 10%);">

Интересно играть:

.foo {
    width: 200px;
    height: 100px;
    background-image: repeating-linear-gradient(45deg, orange, orange 25px, #FFF 25px, #FFF 50px);
}

45deg:

.

Примеры почти сотни слайдеров, сделанных большим парнем с использованием градиентов:Пример слайдера

repeating-radial-gradient()

используяналожение фона, для достижения эффекта записи:

<div class='record'></div>

.record {
    position: relative;
    margin: 0 auto;
    width: 260px; height: 260px;
    border-radius: 50%;
    background:
        linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0,
        linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%,
        repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
    background-size: 50% 100%, 100% 50%, 100% 100%;
    box-shadow: 5px 10px 20px #ccc;
}
.record:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px;
    border: solid 1px #d9a388;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #da5b33,
        inset 0 0 0 27px #da5b33;
    background: #fff;
    content: '';
}

прикреплять:Zhang Xinxu — 10 демонстрационных примеров для изучения радиального градиента CSS3.

Динамические изменения

Предварительно установив градиенты, двигаясь анимациейbackground-positionчтобы показать эффект динамического изменения градиента. Чтобы начало и конец анимации выглядели бесшовными, цвет начала и конца градиента должен быть одинаковым;

<div class="dynamics"></div>

.dynamics {
    width: 100%;
    height: 100px;
    background: linear-gradient(90deg, #496eaa, #944fa8, #a8804f, #944fa8, #496eaa);
    background-size: 1400% 300%;
    animation: dynamics 20s ease infinite;
    -webkit-animation: dynamics 20s ease infinite;
    -moz-animation: dynamics 20s ease infinite;
}
@keyframes dynamics {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 50% 100%;
    }

    100% {
        background-position: 100% 0%;
    }
}

Ссылаться на

MDN-linear-gradient

MDN-radial-gradient

Эффект

Первоначально опубликовано в моем блоге:Студия Шиба Ину CQ STUDIO

Эффект можно увидеть в статье в моем блоге, а на самородках нет возможности написать анимацию~

Категории