未来周记8

3.5背景图像固定(背景附着)
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment后期可以制作视差滚动的效果
background-attachment : scroll fixed
作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定

5.2动画常用属性
属性
@keyframes规定动画。
animation  所有动画属性的简写属性，除了animation-play-state属性
animation-name规定@keyframes动画的名称。(必须的)
animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0。( 必须的 )
animation-timing-function规定动画的速度曲线，默认是“ease”
animation-delay规定动画何时开始，默认是0
animation-iteration-count规定动画被播放的次数，默认是1，还有infinite 无限次
animation-direction规定动画是否在下一周期逆向播放，默认是“normal“.alternate逆播放
animation-play-state规定动画是否正在运行或暂停。默认是"running",还有"pause”。
animation-fill-mode规定动画结束后状态，保持forwards回到起始backwards
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束
3d移动的简写方法:
transform:translate3d(x,y,z)
例transform:translate3d(100px,100px,100px)
translateZ(100px) 向外移动100px
*xyz是不能省略的，如果没有就写0;
3D旋转 rotate3d  transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度
判断旋转角度时通过近大远小还是近小远大来判断旋转方向
perspective:透视 就是让物体有3D感
transition-duration:规定完成过渡效果需要花费的时间
transition-delay:属性指定合适将开始切换效果
transition-property:指定css属性的nametransition效果
transition-timing-function：指定切换效果的速度

转换基点位置属性 (transform-origin)
transform-origin 属性允许您改变被转换元素的位置， 2D 转换元素能够改变元素xy轴， 3D 转换元素
还能改变其z轴
这定义了视图被置于xyz轴的何处，z值只能是 ength
transform-origin: X-axis y-axis z-axis ，
xy可以分别是这些值:
left
right
 center
length，像素
%，百分比
transform-origin 属性必须和 transform 属性一同使用
4.默认值是 5e% 5e% ，表示转换基点位于 xy 中心以及 z轴 0的位置
 设置多行容器 
 默认单行容器，不允许换行显示，项目自动收缩适应容器大
flex-wrap: nowrap; 
 flex-wrap: wrap; 
 简化 
 flex-flow: 主轴方向 换行显示; 
 水平单行容器: 默认值 
justify-content:flex-strat 从主轴的起始线开始排列
justify-content:flex-end  对齐到终止线
justify-content:center   居中对齐 space-between 两端对齐
align-items:flex-strat:默认从交叉轴的其实先开始排列  对齐到起始线
align-items:flex-end  对齐到终止线
align-items:center  对齐到交叉轴的中间线：居中对齐
只有一个属性: align-content ,常用值如下表:
属性值
stretch 默认: 项目拉伸占据整个交叉轴
flex-start  所有项目与交叉轴起始线(顶部)对齐
flex-end
所有项目与交叉轴终止线对齐
center 所有项目与交叉轴中间线对齐:居中对齐
space-between 两端对齐:剩余空间在头尾项目之外的项目间平均分配
space-around 分散对齐:剩余空间在每个项目二侧平均分配
space-evenly 平均对齐:剩余空间在每个项目之间平均分配
提示: 多行容器中,交叉轴上可能会有多个项目，剩余空间在项目之间分配才有意义
只有一个属性: align-self ,常用值如下:
属性值                描述
auto        默认值:auto,继承align-items 属性值
flex-start     与交叉轴起始线对齐
flex-end    与交叉轴终止线对齐
center        与交叉轴间线对齐:居中对齐
stretch        在交叉轴方向上拉伸
baseline    与基线对齐
如果项目设置了高度,则 stretch 值无效
baseline:除非全部项目与基线对齐否则效果与起始线对齐是相同
order 属性 单个项目排列顺序
order值越大越靠后
文本效果:text-shadow属性适用于文本阴影

以上是我本周的学习内容，希望通过接下来的学习努力追赶。