css（6）

vw和vh

width：100vw

height：100vh

vw：100vw是占满屏幕宽度

vh ：100vh是占满屏幕高度

没有滚动条的时候

100vw=100%

有滚动条的时候

100vw 包含滚动条，窗口大小不变

100% 刨除滚动条，剩余空间占满

线性渐变

background: linear-gradient(red,gray);

在括号里填入两种或多种颜色

background: linear-gradient( to top , red,gray);

（to top）是往上的意思

默认是往下也就是（to bottom）

（to left）往左

（to right）往右

（to top right）右上角

（to top left）左上角

（to bottom right）右下角

（to bottom left）左下角

background: linear-gradient( 0deg , red,gray);

（0deg）是度数的意思 0-360度自定义

径向渐变

background: radial-gradient(red,green);

在括号里填入两种或多种颜色

background: radial-gradient(red 10%,green50%);

(red 10%,green50%)red从百分之十开始渐变到百分之五十结束渐变百分之五十之后都是green的颜色

background: radial-gradient(circle red 10%,green50%);

circle 圆形

ellipse 椭圆形

size指定了渐变的大小，既渐变到哪里停止，他有四个值

background:-webkit- radial-gradient(60% 40% closest-side red 10%,green50%);

-webkit-（兼容性不好要加前缀）（Google浏览器）

两个百分数是让中心点改变

closest-side最近边

farthest-side最远边

closest-corner最近角

farthest-corner最远角

重复渐变

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

加上repeating-就可以线性渐变重复

background: repeating-radial-linear-gradient(red，yellow 10%，green 20%);

加上repeating-radial-就可以径向渐变重复

动画过渡属性

transition：all 2s linear 3s；（复合属性）

all 所有属性

（1） transition-property: height;检索或设置对象中的参与过渡的属性

（2） transition-duration: 2s;检索或设置对象过渡的持续时间

（3） transition-timing-function: linear;检索或设置对象中过渡的动画类型

linear 匀速（默认是匀速）

ease逐渐慢下来

ease-in加速

ease-out减速

ease-in-out先加速后减速

cubic-bezier(0,1.59,1,-0.9)贝塞尔曲线

（http//cubic-bezier.com/）贝塞尔曲线网站

（4） transition-delay: 3s;检索或设置对象延迟过度的时间

2D属性

移动

（1）transform:translatex(100px) translatey(-100px);

支持x轴y轴单独平移

（2）transform: translate(-100px,100px);

整体平移

逗号前面的是X轴后面的是Y轴

缩放

transform: scale(1.5);（放大一点五倍）

负值-倒向放大

支持x轴y轴单独平移

scalex x轴

scaley y轴

改变中心点位置

transform-origin:left top;

center默认

left top左上

left bottom左下

left center左中

right top右上

right bottom右下

right center右中

旋转

transform: rotate(-80deg);

正值顺时针

负值逆时针

transform: rotatex(-80deg);

x轴旋转（像烧烤架那么转）

y轴旋转（像烧烤架竖着转）

z轴旋转（中心旋转）

倾斜

transform: skew(30deg,30deg );（支持负值）

skewx 正值，拽右下角，往右边拉动（负值，拽左下角，往左边拉动）

skewy 正值，拽右下角，往下边拉动（负值，拽左下角，往下边拉动）

skew(x,y) 正值，拽右下角，往右下边拉动（负值，拽左下角，往左下边拉动）

关键帧动画

复合属性

animation: ~~zidingyi~~ 2s linear 1s infinite；（删除线写的可以自定义）

infinite（无限次）

（1）@keyframes ~~zidingyi~~{ from{ } to{ } }

from{ }（初始）

to{ }（结束）

（2）@keyframes ~~zidingyi~~{ 0%{ } 50%{ } 100%{ } }

也可以百分比

单一属性

animation-name: zidingyi;

名称自定义

animation-duration: 2s;

和动画过渡属性效果一样

animation-timing-function: linear ;

和动画过渡效果一样

animation-delay: 5s;

和动画过渡效果一样

animation-iteration-count: infinite;

可以自定义数值，也可以写infinite

animation-play-state: paused;

配合hover属性，paused鼠标移入暂停， running默认效果

animation-direction: normal;

normal默认，reverse反方向，alternate正常交替，alternate-reverse;反方向交替

animation-fill-mode: forwards;

forwards停留最后的画面，none默认，backwards停留初始画面

animation: tao 3s steps(1,start);

数值越大越细腻，end保留当前帧看不到最后一帧动画结束，

start保留下一帧看不到第一帧从第一帧很快跳到最后一帧

3D属性

平移

（1）transform-style: preserve-3d;

flat是二维，preserve-3d是三维

transform: translateZ(100px);

支持x轴y轴z轴，x轴y轴2D属性里有

（2）transform: translate3d(0,0,100px);

括号里第一个是x，第二个是y，第三个是z

景深

perspective: 900px;

加在父盒子

旋转

3d的是立体旋转，2d的是平面旋转