CSS не просто - вы не знаете не то же самое с градиентом

внешний интерфейс CSS

Как новое свойство CSS3, градиент также имеет бесконечный потенциал.

1. Введение

   Градиент — это новый тип изображений в CSS3, который используется для замены изображений. Его преимущества:

  • Ускорить загрузку страниц и уменьшить использование полосы пропускания;
  • более гибкий.

2. Линейный градиент

   На самом деле, использование градиентов довольно распространено, например, панель навигации:

饿了么网页版导航栏

    background-image: linear-gradient(90deg,#0af,#0085ff)

Очевидно, что это намного лучше, чем однотонный фон.

   Конечно, бывают случаи, когда нам не нужны эффекты перехода:

法国国旗

    background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);

   Для линейных градиентов, помимо linear-gradient, есть еще Repeating-linear-gradient:

重复条纹背景

    $c1: #fff;
    $c2: #DF5646;
    $c3: #1C78A4;
    background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);

   Как видите, с градиентами не все так просто.

   Кто-то должен спросить здесь, какие трюки можно сыграть? Прежде всего, нам нужно понять, что градиент — это своего рода изображение, а затем подумать, какие еще свойства CSS можно использовать с изображениями?

背景

    $color: #122556;
    background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%),
                      linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%);
    background-size: 30px 30px;

   Благодаря этому примеру идея использования градиентов стала более открытой? Однако здесь следует отметить еще одну вещь:

  • Когда вы объявляете несколько градиентов, первый объявлен, тем ближе к пользователю. (Здесь мы должны рассмотреть вопрос о покрытии, как правило, с использованием прозрачного);

Точно так же градиент также может делать анимацию

渐变背景动画

    @mixin menuaction($color) {
        background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%;
        &:hover {
            background-size: 100% 100%;
            color: #fff;
        }
    }

Три, радиальный градиент

   Использование радиального градиента и повторяющегося радиального градиента для радиальных градиентов в основном такое же, как и для линейных градиентов. Давайте рассмотрим их самостоятельно.

4. Резюме

  Чем это заканчивается, ха-ха, в последнее время есть разные купоны, так что давайте воспользуемся знаниями градиента для создания купона:

image

	width: 300px;
    height: 120px;
    background: radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(#fff 0, #fff 10px, rgb(247,245,201) 10px) no-repeat,
                radial-gradient(#fff 0, #fff 10px, rgb(247,245,201) 10px) no-repeat,
                linear-gradient(90deg,transparent 10px, rgb(247,245,201) 10px);
    background-size: 20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,60px 60px,60px 60px,100% 100%;
    background-position: -10px 0,-10px 20px,-10px 40px,-10px 60px,-10px 80px,-10px 100px,60px -30px,60px 90px,left center;

   Если у тебя сейчас много мыслей, почему бы тебе не поторопиться.

Друзья, которым понравилась эта статья, прошу обратить внимание на мой номер подпискилюблю набирать код, узнать больше.

Категории