盒模型、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;
暂停动画