盒模型、3d变换、关键帧动画

盒模型、3d变换、关键帧动画

1杂七杂八

1.1box-shadow边框阴影

box-shadow:18px 27px 10px 30px red inset;

第一个数值代表水平偏移；第二个数值代表垂直偏移；第三个数值代表模糊区域；第四个数值代表拓展区域；第五个数值代表阴影颜色；第六个数值代表内阴影还是外阴影，其中默认属性为外阴影，inset为内阴影。

注意：水平偏移，内阴影时是从左边线开始向右为正，外阴影时从右边线开始向右为正；垂直偏移时，内阴影时是从上边线开始向下为正，负值为下边线开始向上投影。

1.2新增颜色模式

1.2.1opacity属性

opacity是属性，如opacity:0.1，当加上不透明度，整个盒子都会变透明，包括背景颜色、字体颜色等。

1.2.2rgba

rgba是属性值，rgba(红色0-255,绿色0-255,蓝色0-255,不透明度0-1)；

语法：color{rgba( );}。注意与opacity区分。

1.2.3transparent属性值，完全透明

如，color:transparent;

1.2.4hsla属性值

h代表色调（0-360），s饱和度，l亮度，a不透明亮度。比较少用。

语法：   color:hsla(360,5%,5%,1);

1.3box-sizing

盒模型=content+padding+border+margin

1.3.1标准盒模型

标准盒模型中width,height指的是content的宽、高。

1.3.2怪异盒模型

在怪异盒模型中，width=content+padding+border; height=content+padding+

border。

1.3.1box-sizing

box-sizing:content-box;  表示标准盒模型

box-sizing:border-box;  表示怪异盒模型

content-box代表content以内都是width或height；border-box代表border以内都是width或height。

2 transform 3d变换

2.1transform 3d变换之translate

transform:translate3d(x,y,z); 移动变换，往x轴走x，往y轴走y，z轴走z。

其中，x轴向右为正，左为负；y轴向下为正，向上为负；z轴向屏幕外为正，屏幕内为负。

只表示一个值时， transform:translateX( );

2.2设置transform 3d变换步骤（translate rotate都可用）

Tep1:保持3d变换，写在父元素上   transform-style:preserve-3d;

Tep2:在父元素上设置景深  perspective:如1000px;

Tep3: prespective-orgin:50%,0;  视点在盒子平面的上边线的中点，只有在景深值较小时效果才明显。

Tep4:在要改变的子元素上设置数值。

2.3 transform 3d转换之rotate

2.3.1 transform:rotateX();

遵循左手定律，以轴的方向作为大拇指指向，那么手掌卷曲的方向为旋转的正值。

旋转的中心点默认在元素正中央。

说明，当盒子roate时，它的另外两个轴所指的方向也会改变。

2.3.2transform:rotateY( );

2.3.3transform:rotateZ( );

2.3.4三个轴的rotate角度一样

transform(0,1,1,<angel>);  

三个数值中，0代表不旋转，1代表旋转；第一个数值代表x轴的旋转，第二个数值代表y轴的旋转，第三个数值代表z轴的旋转，angle表示旋转的角度。

3动画

动画不需要人去操作，会自动播放；transform，在hover后会直接显示变形后效果，有没过渡的过程，只有加了transition后才有类似于动画的效果。

3.1设置动画过程

Tep1：通过@keyframes指定动画序列；

Tep2：通过百分比将动画序列分割成多个节点；

Tep3：各节点中分别定义属性；

Tep4：通过animation将动画应用于相应元素。

div{

........

animation:mingzi;

}

@keyframes{

0%{}

100%{

width:;

height:;

.......

}

3.2 animation的各个属性

3.2.1 animation-name

动画名称

3.2.2 animation-duration

动画持续时间

3.2.3 animation-timing-function

动画形式/过渡速率。animation-timing-function:linear/ease-in/ease-out/ease;

3.2.4 animation-delay

延迟时间

3.2.5 animation-iteration-count 动画重复次数

动画重复次数 animation-iteration-count:1/infinite;  可以直接设置次数，infinite为无限循环。

3.2.6 animation-direction动画轮流播放

animation-direction:reserse/alternate/alternate-reserse;   反向播放、交替播放、方向交替播放。轮流播放时需要设置animation-iteration-count:infinite;

3.2.7 animation-fill-mode动画结束后显示元素模式

animation-fill-mode:forwards;  动画结束后，保持最后一个状态

3.2.7 animation属性值缩写

aimation:1 2 3 4 5 6 7;  其中1,2不能省略。

3.2.8 animation-timing-function的属性值step

animation-timing-function:step(1);

@keyframes change{

0%{}

50%{}

100%{}

}

 其中，0%-50%为一帧，50%-100%为一帧。step(1)指每一帧分一步完成，step(n)指每一帧分n步完成。

step(n,end)=step(n)  每一帧分n步完成，每一步都以前一步的效果完成填充一整步；step(n,start)每一帧分n步完成，每一步以后一步的效果完成填充一整步。

3.2.9animation-play-state:paused;

 暂停动画