day13

目录

1.元素隐藏（五种方法）

1.宽高设为0

2.display:none;

3.元素隐藏visibility:hidden;

4.opacity:0;透明度为0

5.transform:scale(0)缩小为0倍

2.渐变背景色

1.线性渐变（行业规定渐变最多五种颜色变化）

1.默认渐变方向从上向下写法

2.改变渐变方向

3.改变渐变方向------对角线

4.兼容写法  直接写方向，需要添加前缀

5.角度的改变  兼容性写法，直接写角度，单位deg

6.百分比写出重叠性

3.径向渐变

1.由内而外，椭圆形状

2.改变中心点位置----边界改变

3.改变中心点位置 -------坐标点

4.改变中心点位置 -------坐标点

5.改变渐变形状

6.重复渐变

3.过渡

1.过渡的四要素

1.过渡属性

2.过渡时间

3.过渡的运动曲线

4.过渡的延迟时间

2.简写

4.2D变化：transform（变化）

1.平移

2.旋转

3.缩放 

4.倾斜

5.多个属性添加在一个元素上,属性之间用空格隔开

6.基点-----始终不变的中轴点

---

1.元素隐藏（五种方法）

1.宽高设为0

width:0;

height:0;

加给父元素overflow:hidden;

2.display:none;

不占位（页面没有渲染这个元素）

3.元素隐藏visibility:hidden;

占位

visibility:vislble;------元素显示

4.opacity:0;透明度为0

占位

IE兼容性方法

filter:alpha(opacity=数值) 数值：1-100

5.transform:scale(0)缩小为0倍

占位

2.渐变背景色

1.线性渐变（行业规定渐变最多五种颜色变化）

1.默认渐变方向从上向下写法

background:linear-gradient(red,yellow)

2.改变渐变方向

background:linear-gradient(to left, red,yellow)；

to+left|right|bottom|top

3.改变渐变方向------对角线

background:linear-gradient(to  left top,red,yellow)

to + left  top......

4.兼容写法  直接写方向，需要添加前缀

background:-webkit-linear-gradient(left, red,yellow)

5.角度的改变  兼容性写法，直接写角度，单位deg

background:-webkit-linear-gradient(45deg, red,yellow)

6.百分比写出重叠性

background:linear-gradient(red 20%,yellow 30%) ;

不建议

3.径向渐变

1.由内而外，椭圆形状

background:radial-gradient(red ,yellow)

2.改变中心点位置----边界改变

background:-webkit-radial-gradient(left,red ,yellow)

3.改变中心点位置 -------坐标点

background:-webkit-radial-gradient(left top,red ,yellow)

4.改变中心点位置 -------坐标点

background:-webkit-radial-gradient(50% 50% ,yellow)

5.改变渐变形状

background:-webkit-radial-gradient(circle,yellow)

默认椭圆-----ellipse

circle----圆

6.重复渐变

background:repeating-linear-gradient(red 10% ,yellow 20%);

background:repeating-radial-gradient(red 10% ,yellow 20%);

3.过渡

过度=渡需要与伪类hover搭配使用

举例：transition-property:border-radius, background-color;

1.过渡的四要素

1.过渡属性

transition-property: all;

2.过渡时间

transition-duration: 2s;

3.过渡的运动曲线

transition-timing-function:cubic-bezier(0, 1.7, 1, 1) ;

4.过渡的延迟时间

transition-delay: 1s;

2.简写

transition:all 2s linear 1s;

4.2D变化：transform（变化）

1.平移

translate

1. transform: translateY(50px); ----------沿Y轴平移
2. transform: translatex(100px);----------沿X轴平移
3. transform: translateX(100px) translateY(100px);----------沿坐标点平移
4. transform: translate(100px,100px)----------沿坐标点平移
5. translate一个值是X轴方向
6. translate两个值是坐标点方向

2.旋转

rotate

1. transform:rotateX(15deg);----------沿X轴旋转
2. transform: rotateY(15deg);----------沿Y轴旋转
3. transform: rotateX(180deg) rotateY(180deg);------------沿中心点旋转
4. transform: rotate(360deg);--------------沿中心点平面旋转

3.缩放 

scale（取值范围n）

1. transform: scaleX(0.5);------------宽度缩小或放大
2. transform: scaleY(.5);------------高度缩小或放大
3. transform: scale(1)--------------中心点缩放

n=1    :不变

n>1    :放大n倍

0<n<1  :缩小n倍

n=0    :元素隐藏

-1<n<0 :镜像缩小

n<-1   :镜像放大

4.倾斜

skew

transform: skewX(40deg); ---------X轴倾斜

transform: skewY(40deg);  ---------Y轴倾斜

transform: skew(20deg,20deg)

skew一个值 ---------X轴倾斜

skew两个值 ---------中心点

5.多个属性添加在一个元素上,属性之间用空格隔开

transform: translate()  scale();

6.基点-----始终不变的中轴点

transform-origin: left top;