四、动画模块
不同点:过渡必须人为的触发才会执行动画而动画不需要人为的触发
相同点:都是用来给元素添加动画效果的
animation-name: xx;:需要执行动画的名称为xx
@keyframes xx
{
from/0%{ }
to/100%{ }
}
创建一个名称为xx的动画,两种方法
- 使用关键字from to相当于从0%-100%
- 可以将0%-100%分成好多块执行动画
animation-duration: 时间;:动画持续时长
三要素:
- 告诉系统需要执行哪个动画
- 告诉系统我们需要自己创建一个名称叫做xx的动画
- 告诉系统动画持续的时长
其他属性:
animation-timing-function: ease;:告诉系统动画运动的速度,默认值为ease
animation-delay: 时间;:告诉系统延迟多长时间再执行
animation-iteration-count: 次数;:告诉系统需要执行的动画的次数,默认值是1,infinite无限
animation-direction: normal/alternate;:告诉系统是否需要执行往返动画,默认值是normal,alternate为往返
animation-play-state: running/paused;:告诉系统动画是否要暂停,默认值是running
animation-fill-mode: none/forwards/backwards/both;:
none:不做任何改变
forwards:让元素结束状态时保留最后一帧的样式
backwards:让元素在等待状态时,显示第一帧的样式
both:让元素等待时显示第一帧的样式,结束时保留最后一帧的样式
连写:animation: name duration timing-function delay iteration-count direction;
连写的简写:``animation: name duration;`
五、3D转换模块
2D是一个平面只有宽度和高度,没有厚度
3D是一个立体,有宽度,高度,还有厚度
默认情况下所有元素都是呈2D展现的
和透视一样,想看到某个元素的3D效果,只需要给他的父元素设置一个transform-style: flat/preserve-3d;,默认值是flat 2D显示.
注意:
设置动画时,动画里的属性会覆盖前面的属性
把不变的属性写在前面,变化的属性写在后面
六、背景属性
1. 背景图片尺寸属性
背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小
不设置时默认图片
background-size: 宽度px 高度px;:具体像素
background-size: 宽度% 高度%;:百分比为当前元素的百分比
background-size: auto 高度;:宽度等比拉伸
background-size: 宽度 auto;:高度等比拉伸
background-size: cover;:等比拉伸,直到宽度和填满整个元素
background-size: contain;:等比拉伸,直到宽度或者高度填满整个元素为止
2. 背景图片定位区域
背景图片定位区域是专门用来指定背景图片从哪个区域开始,默认值为padding-box
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
3. 背景图片绘制区域
背景图片绘制区域是专门用来指定从哪个区域开始绘制背景的,默认情况下会从border区域开始绘制
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
4. 多重背景图片
多张背景图片之间用逗号隔开,建议在编写多重背景时按照属性分类拆开写,属性之间也用逗号隔开
