渐变字体图标和转换

1.背景渐变

1.线性渐变

1.普通渐变

background:linear-gradient(颜色1，颜色2)

2.设置渐变方向

background:linear-gradient(to 方向，颜色1，颜色2)

3.设置对角渐变

background:linear-gradient(to 方向1，方向2，颜色1，颜色2)

4.设置渐变角度

background:linear-gradient(*deg,颜色1，颜色2)

【如果比例一样，就是明确的两个底色】

5.设置渐变比例

background:linear-gradient(颜色1 *% ，颜色2 *%)

2.径向渐变

1.普通渐变

background:radial-gradient(颜色1，颜色2)

2.设置渐变图案

background:radial-gradient(circle，颜色1，颜色2)

【默认为椭圆ellipse】

3.设置渐变比例

background:radial-gradient(颜色1 *%，颜色2 *%)

3.重复渐变

1.重复线性渐变

background:repeating-linear-gradient(颜色1 *% ，颜色2 *%)

2.重复径向渐变

background:repeating-radial-gradient(颜色1 *%，颜色2 *%)

2.字体图标

1.自定义字体

1.定义字体

@font-face{
	font-famili:'自己给字体取的名字'；
	src:url('对应字体文件路径')；
}

2.使用字体

选择器{
	font-family:'步骤一定义的字体名字'；
}

3.过渡（放在结构本身身上）

让改变缓缓进行

transition:渐变的属性名  执行时间  延迟时间  变化曲线，渐变的属性名  执行时间  延迟时间  变化曲线；

​ 说明：渐变属性可以写all，代表所有属性都渐渐改变

​ 变化曲线linear线性即匀速

注意：过渡必须要有触发！

​ 过渡只能针对属性值可以数字化的属性！display不能用过渡

4.变形/转换

1.位移：位置的移动（里面写*px）

transform:translate(x,y);
transform:translateX(x);
transform:translateY(y);
transform:translateZ(z);
transform:translate3d(x,y,z);

 transform: translate3d(*px,*px,*px)

2.放缩：放大缩小元素,代表对应方向值的倍数

transform:scale(x,y);
transform:scaleX(x);
transform:scaleY(y);
transform:scaleZ(z);
transform:scale3d(x,y,z);

3.旋转：里面写旋转角度：*deg

transform: rotate(0deg);
transform: rotateX(0deg);
transform: rotateY(0deg);
transform: rotate3d(30deg,1,1,0.5)[这里x,y,z写的是数字，代表是前面角度的多少倍]

4.斜切

tranform:skew(*deg,*deg);
tranform:skewX(*deg);
tranform:skewY(*deg);