CSS — тема с градиентным градиентом

CSS
CSS — тема с градиентным градиентом

css градиент (тема)

【содержание】

  • css градиент (тема)
    • линейный градиент
      • Первый параметр (направление, можно игнорировать)
        • 1. Первый параметр по умолчанию сверху вниз, если не написано
        • 2. Если есть первый параметр (сверху/слева/снизу/справа)
        • 3. Угол также можно контролировать с помощью угла (значение угла в градусах)
      • второй параметр (цвет)
        • 1. Вы можете использовать английские буквы для управления цветом
        • 2. Вы можете использовать шестнадцатеричный #RRGGBB для управления цветом
        • 3. Вы можете использовать шестнадцатеричный код плюс прозрачность #RRGGBBAA для управления цветом.
        • 4. Используйте rgb/rgba для управления цветом
        • 5. Используйте несколько элементов управления цветом
        • 6. Используйте несколько элементов управления цветом с указанными диапазонами
      • Общее письмо с линейным градиентом
    • радиально-градиентный
      • Первый параметр в первом параметре (радиус, игнорируемый)
        • 1. Если первый параметр не прописан, то по умолчанию он будет начинаться с середины, а стиль круговой
        • 2. Если вы пройдете радиус
        • 3. Если вы передаете два значения радиуса
        • 4. Если вы передаете ключевые слова (ближайшая сторона/ближайший угол/самая дальняя сторона/самый дальний угол)
          • 4.1 Если он круглый
          • 4.2 Если это эллипс
      • Два параметра в первом параметре (форма, можно не учитывать)
        • 1. Если только форма параметра (круг, эллипс)
        • 2. Если форма и длина плюс
      • Третий параметр в первом параметре (направление, можно не учитывать)
        • 1. Если у первого есть параметры (центр/сверху/снизу/слева/справа)
        • 2. Если направление имеет конкретное значение, определите центр окружности
        • 3. Если направление указано в процентах, определите центр круга.
      • второй параметр (цвет)
      • Общие обозначения радиального градиента
    • Проблемы совместимости
    • Особенный эффект
      • индикатор
      • анимированный трехмерный шар
    • Ссылаться на

CSS3 определяет два градиента: **Линейные градиенты**илиРадиальные градиенты

И это свойство совместимо только с IE 10 и выше, после чего поговорим о совместимости градиентов.

Градиент — это тип фонового изображения, поэтому в свойстве CSS вы можете написать ==background== или ==background-image==.Все нижеперечисленное написано с фоном.

линейный градиент

==Features== : Цветовой градиент в одном направлении, вверх/вниз/влево/вправо/по диагонали.

==elements== : направление, цвет (начало, конец, промежуточный цвет)

==Синтаксис== :background: linear-gradient(to direction, color-start, color-stop1, ... , color-end);

== Использование == :

Первый параметр (направление, можно игнорировать)

1. Первый параметр по умолчанию сверху вниз, если не написано

background: linear-gradient(hotpink, darkblue);

Изображение эффекта:derection1.png

2. Если есть первый параметр (сверху/слева/снизу/справа)

== Если это родное письмо, не забудьте добавить, чтобы направление позади было прямо противоположным, и когда диагональная линия вверх, вниз, влево и вправо можно поменять местами ==

вниз (начиная сверху)

направо (начиная с левого)

налево (начиная с права)

наверх (начните снизу)

в верхний левый (начиная с нижнего правого угла)

вверху справа (начиная с нижнего левого угла)

в левый нижний (начиная с правого верхнего угла)

в правый нижний угол (начиная с правого нижнего угла)

background: linear-gradient(to bottom,hotpink, darkblue);
background: linear-gradient(to right,hotpink, darkblue);
background: linear-gradient(to left,hotpink, darkblue);
background: linear-gradient(to top,hotpink, darkblue); 
background: linear-gradient(to right bottom,hotpink, darkblue); 
background: linear-gradient(to top right,hotpink, darkblue);
background: linear-gradient(to left bottom,hotpink, darkblue);
background: linear-gradient(to top left,hotpink, darkblue);

derection2.png

3. Угол также можно контролировать с помощью угла (значение угла в градусах)

Все цвета начинаются от центра, 0 градусов — это направление вверх, по часовой стрелке — положительное значение, против часовой стрелки — отрицательное.

0 градусов / 360 градусов (снизу вверх)

90 градусов (слева направо)

180 градусов (сверху вниз)

270 градусов / -90 градусов (справа налево)

45 градусов (диагональ снизу слева вверх справа)

background: linear-gradient(0deg,#fc466b, #3f5efb);
background: linear-gradient(90deg,#fc466b, #3f5efb);
background: linear-gradient(180deg,#fc466b, #3f5efb);
background: linear-gradient(270deg,#fc466b, #3f5efb);
background: linear-gradient(360deg,#fc466b, #3f5efb);
background: linear-gradient(-90deg,#fc466b, #3f5efb);
background: linear-gradient(-180deg,#fc466b, #3f5efb);
background: linear-gradient(45deg,#fc466b, #3f5efb);

Изображение эффекта:derection3.png

​

второй параметр (цвет)

1. Вы можете использовать английские буквы для управления цветом

   background: linear-gradient(slateblue, cornflowerblue);

Изображение эффекта:color1.png

Конечно, если вы используете прозрачность, вы можете увидеть полный градиент эффекта прозрачности.

   background: linear-gradient(transparent, cornflowerblue);

Изображение эффекта:color7.png

2. Вы можете использовать шестнадцатеричный #RRGGBB для управления цветом

background: linear-gradient(#fc466b, #3f5efb);

Изображение эффекта:color2.png

3. Вы можете использовать шестнадцатеричный код плюс прозрачность #RRGGBBAA для управления цветом.

​ Так называемая шестнадцатеричная плюс прозрачность обычно не используется и не рекомендуется. Почему это не рекомендуется? То есть == вызовет относительно большие проблемы с совместимостью==, но иногда его приходится использовать, потому что необходимо решать проблему совместимости с прозрачностью.

В чем проблема?

>  Chrome和火狐浏览器是支持的，形式是==#rrggbbaa== 但是这种形式在IE中就是不支持的。
>
>  IE浏览器是什么情况呢？IE9以下如果加透明度是按照==#aarrggbb== 的形式来的，但是这种形式IE10和IE11都是不支持的，所以用这个办法，IE10和IE11都出不来。所以==不推荐使用== 。

>AA指透明度：00表示全透明，FF表示完全不透明。
>
>RR指红色值
>
>GG指绿色值
>
>BB指蓝色值

Как преобразовать прозрачность ==0~1 в прозрачность шестнадцатеричного числа 00-FF? ==

​Math.round(256 * opacity).toString(16)

Давайте попробуем код в 2 с прозрачностью 50%:

background: linear-gradient(#7ffc466b, #7f3f5efb);

Вот рендеринг для Chrome и Firefox:color6.png

4. Используйте rgb/rgba для управления цветом

background: linear-gradient(rgb(255,237,188), rgb(237,66,100));   /*rbg*/
background: linear-gradient(rgb(255,237,188,.5), rgb(237,66,100,.5));  /*rgba*/

Изображение эффекта:color3.png

5. Используйте несколько элементов управления цветом

Так же, как бонус в спину

background: linear-gradient(#3a1c71, #d76d77,#ffaf7b);

Изображение эффекта:color4.png

6. Используйте несколько элементов управления цветом с указанными диапазонами

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

background: linear-gradient(#3a1c71, #d76d77,#ffaf7b); 
background: linear-gradient(#3a1c71, #d76d77 20% ,#ffaf7b 70%); 
background: linear-gradient(#3a1c71, #d76d77 80% ,#ffaf7b 90%);

Изображение эффекта:color5.png

Общее письмо с линейным градиентом

background: linear-gradient(to bottom,#3a1c71, #d76d77 80% ,#ffaf7b 90%);

радиально-градиентный

==Features== : Это цветовой градиент от центральной точки к периферии.

==элементы== : направление, форма, размер, цвет (начало, конец, промежуточный цвет)

==Синтаксис== :background: radial-gradient(size shape at position,start-color, ..., last-color);

==Используйте == : == Оба используют 200px * 200px div==

Первый параметр в первом параметре (радиус, игнорируемый)

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

background: radial-gradient(hotpink, darkblue);

Изображение эффекта:dc1.png

2. Если вы передаете радиус значения

background: radial-gradient(300px,hotpink, darkblue);
background: radial-gradient(200px,hotpink, darkblue);

====

Изображение эффекта:size2.png

3. Если вы передаете два значения радиуса

== При передаче двух значений по умолчанию используется эллипс, одно из которых представляет собой длину по горизонтали, а другое — длину по вертикали ==

background: radial-gradient(200px 50px,hotpink, darkblue);
background: radial-gradient(50px 100px,hotpink, darkblue);

Изображение эффекта:size3.png

4. Если вы передаете ключевые слова (ближайшая сторона/ближайший угол/самая дальняя сторона/самый дальний угол)

==Этот размер определяется положением==

4.1 Если он круглый
/*closest-side*/
background: radial-gradient(closest-side,#ffaf7b, #d76d77 ,#3a1c71);
/*40%只写一个表示40% 50%*/
background: radial-gradient(closest-side circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);  
background: radial-gradient(closest-side circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*closest-corner*/
background: radial-gradient(closest-corner,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(closest-corner circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(closest-corner circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*farthest-side*/
background: radial-gradient(farthest-side,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-side circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-side circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*farthest-corner*/
background: radial-gradient(farthest-corner,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);

Изображение эффекта:sizec2.png

4.2 Если это эллипс
/*closest-side*/
background: radial-gradient(closest-side ellipse,#ffaf7b, #d76d77 ,#3a1c71);
/*40%只写一个表示40% 50%*/
background: radial-gradient(closest-side ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);  
background: radial-gradient(closest-side ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*closest-corner*/
background: radial-gradient(closest-corner ellipse,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(closest-corner ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(closest-corner ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*farthest-side*/
background: radial-gradient(farthest-side ellipse,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-side ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-side ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);
/*farthest-corner*/
background: radial-gradient(farthest-corner ellipse,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);

Изображение эффекта:sizec3.png

Два параметра в первом параметре (форма, можно не учитывать)

1. Если только форма параметра (круг, эллипс)

== Если div квадратный, то нет разницы между кругом и эллипсом, но если это прямоугольник, то эллипс будет сжат в соответствии с длиной==

background: radial-gradient(circle,hotpink, darkblue); /*下图1和3*/
background: radial-gradient(ellipse,hotpink, darkblue); /*下图2和4*/

Рендеринг (два слева 200px * 200px и два справа 200px * 100px)circle1.png

2. Если да, добавьте диапазон длины и форму

==В этом примере показано, что радиус должен быть указан перед формой, а радиус больше, чем форма==

background: radial-gradient(300px circle,hotpink, darkblue);
background: radial-gradient(200px circle,hotpink, darkblue);
background: radial-gradient(100px circle,hotpink, darkblue);
background: radial-gradient(50px circle,hotpink, darkblue);
background: radial-gradient(0px circle,hotpink, darkblue);

/*如果这里加了长短轴的尺寸后面又写了circle，那么circle是不起作用的，出来还是一个椭圆*/
background: radial-gradient(200px 50px ellipse,hotpink, darkblue);

Изображение эффекта:size1.png

Третий параметр в первом параметре (направление, можно не учитывать)

1. Если у первого есть параметры (центр/сверху/снизу/слева/справа)

==Если это родное письмо, не забудьте добавить at, и когда диагональная линия идет вверх, вниз, влево и вправо можно поменять местами==

background: radial-gradient(at center,hotpink, darkblue);
background: radial-gradient(at top,hotpink, darkblue);
background: radial-gradient(at bottom,hotpink, darkblue);
background: radial-gradient(at left,hotpink, darkblue);
background: radial-gradient(at right,hotpink, darkblue);
background: radial-gradient(at center center,hotpink, darkblue);
background: radial-gradient(at top left,hotpink, darkblue);
background: radial-gradient(at top right,hotpink, darkblue);
background: radial-gradient(at bottom right,hotpink, darkblue);
background: radial-gradient(at bottom left,hotpink, darkblue);

Изображение эффекта:dc2.png

2. Если направление имеет конкретное значение, определите центр окружности

== может быть положительным или отрицательным, может быть за пределами допустимого диапазона ==

background: radial-gradient(circle at 0 0,hotpink, darkblue);
background: radial-gradient(circle at 50px 50px,hotpink, darkblue);
background: radial-gradient(circle at 100px 50px,hotpink, darkblue);
background: radial-gradient(circle at 50px 100px,hotpink, darkblue);
background: radial-gradient(circle at 100px 100px,hotpink, darkblue);

Изображение эффекта:dc3.png

3. Если направление указано в процентах, определите центр круга.

== может быть целым или отрицательным, может быть вне диапазона, направление такое же, как указано выше ==

background: radial-gradient(circle at 0 0,hotpink, darkblue);
background: radial-gradient(circle at 25% 25%,hotpink, darkblue);
background: radial-gradient(circle at -25% 50%,hotpink, darkblue);
background: radial-gradient(circle at 50% 150%,hotpink, darkblue);
background: radial-gradient(circle at 50% 50%,hotpink, darkblue);

Изображение эффекта:dc4.png

второй параметр (цвет)

Цвета обсуждались в линейных градиентах, радиальные градиенты эквивалентны линейным градиентам. Здесь объясняются только разные части:

Только при расчете радиального градиента в процентах переход цвета осуществляется изнутри наружу

background: radial-gradient(#ffaf7b, #d76d77,#3a1c71); 
background: radial-gradient(#ffaf7b, #d76d77 20% ,#3a1c71 70%); 
background: radial-gradient(#ffaf7b, #d76d77 80% ,#3a1c71 90%);

Изображение эффекта:color8.png

Общие обозначения радиального градиента

background: radial-gradient(100px circle at 75% 75%,#ffaf7b, #d76d77 20% ,#3a1c71 60%); 
background: radial-gradient(200px 100px ellipse at 25% 25%,#ffaf7b, #d76d77 60% ,#3a1c71 90%);

Изображение эффекта:all.png

Проблемы совместимости

Проблема совместимости — это проблема совместимости различных браузеров.

  1. Первый шаг можно решить, просто добавив приватный префикс.

    ==Обратите внимание, что стандартный синтаксис должен быть написан внизу с приватным префиксом без to, направление является отправной точкой==

    /*线性渐变*/
background: -webkit-linear-gradient(left, hotpink , darkblue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, hotpink, darkblue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, hotpink, darkblue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, hotpink , darkblue); /* 标准的语法 */
/*径向渐变*/
background: -webkit-radial-gradient(center, hotpink , darkblue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(center, hotpink, darkblue); /* Opera 11.1 - 12.0 */
background: -moz-radial-gradient(center, hotpink, darkblue); /* Firefox 3.6 - 15 */
background: radial-gradient(at center, hotpink , darkblue); /* 标准的语法 */

  2. Второй шаг предназначен в основном для браузеров ниже IE9, которые не поддерживают эффекты градиента.

    == Решение состоит в том, чтобы использовать частный градиентный фильтр IE ==

    filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=hotpink,endcolorstr=darkblue,gradientType=1);
/**
@ 第一个参数：startcolorstr 表示起始颜色（英文字母 or 十六进制）
@ 第二个参数：endcolorstr 表示终止颜色（英文字母 or 十六进制）
@ 第三个参数：gradientType 表示方向（1为横向渐变，0为纵向渐变）
*/

    Если вы хотите получить белый и прозрачный эффект, используйте 8-символьную шестнадцатеричную запись, как упоминалось выше, правило ==#AARRBBGG==

    Поэтому, если вы хотите быть совместимым с браузерами ниже IE9, напишите:

    /*50%透明度的#fc466b和50%透明度的#3f5efb*/
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7ffc466b,endcolorstr=#7f3f5efb,gradientType=1);/*兼容IE9以下*/
background: -webkit-linear-gradient(left, rgba(252,70,107,.5) , rgba(63,94,251,.5)); /* 标准的语法 */
background: -o-linear-gradient(left, rgba(252,70,107,.5) , rgba(63,94,251,.5)); /* 标准的语法 */
background: -moz-linear-gradient(left, rgba(252,70,107,.5) , rgba(63,94,251,.5)); /* 标准的语法 */
background: linear-gradient(to right, rgba(252,70,107,.5) , rgba(63,94,251,.5)); /* 标准的语法 */

    Изображение эффекта:

jianrong1.jpg

Особенный эффект

Анимация индикатора выполнения

Каков эффект? снимок экрана:jindutiao.png

Анализ: установите угол, цвет и диапазон цветового градиента. Затем анимируйте слева направо.

выполнить:

body{
  margin:0;
  padding:0;
  /*为了展示方便就用灰色的背景*/
  background-color:#ccc;  
}

.load{
  width:500px;
  height:100px;
  /*如果渐变出不来，有一个背景颜色*/
  background:#fff;  
  margin:100px auto;
  /*间隔色的关键代码*/
  background-image:linear-gradient(
  	45deg,
    #fff 0%,
    #fff 25%,
    #000 25%,
    #000 50%,
    #fff 50%,
    #fff 75%,
    #000 75%,
    #000 100%
  );
  /*把刚才的背景压缩到100px * 100px以内的，没有设定不重复所以是重复的*/
  background-size: 100px 100px; 
  /*一秒播一次的永动动画*/
  animation: move 1s linear infinite; 
}

@keyframes move{
  0%{
    
  }
  100%{
    background-position:100px;  /*终止状态是移动到100px像素的位置，然后下一秒又开始从0px开始运动*/
  }
}


<div class="load"></div>

трехмерный шар

Изображение эффекта:ball.png

Анализ: установите цвет фона, градиент от черного прозрачного до непрозрачного, а внешний контур — круг.

body {
  margin: 0;
  padding: 0;
  background-color: #F7F7F7;
}

.radial-gradient {
  width: 200px;
  height: 200px;
  margin: 40px auto;
  border-radius: 100px;
  background-color: hotpink; /*左边的没有背景色，右边的加了背景色*/
  background-image: radial-gradient(
    200px at 50px 60px,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.6)
  );
}

<div class="radial-gradient"></div>

Ссылаться на

Поговорим о линейных градиентах

Поговорим о радиальных градиентах

Категории