css动画笔记

一.笔记
1.固定模式布局分为：流动布局100% 弹性布局 flex
1.1弹性布局
display:flex; 把容器转化为弹性布局
flex-direction: column; 规定里面的元素按照什么方式来布局 row column 翻转
align-items 子元素在y 轴上对其的方式 center 居中 flex-end 底边 flex-start 上边 stretch 垂直拉伸
justify-content x轴对齐 center 居中 flex-end 右边对齐 flex-start 左边对齐 space- between 左右两边对齐 中间平分pace-around 均分所有空白
flex-wrap: wrap; 控制行里面 进行换行
align-content: space-between; 在行里面使用 行留白的时候有效果
flex: 1; 行里面的元素进行分配空间 按等份分配
2.css3里面的手机自适应
2.1viewport 视口
width=device-width 宽度等于屏幕的宽
initial-scale=1.0 伸缩比例为1.0
maximum-scale=3.0 最大伸缩比例
minimum-scale=1.0 最小伸缩比例
user-scalable=no 禁止用户缩放
3.css3里面的动画
3.1 2d 动画 3d 动画 2d转3d 过渡动画 帧动画
transform translate(平移x,y,z) rotate(旋转x,y,z) skew(变形 deg) scale(伸缩 w,h)
translate 默认x
rotate 默认旋转z 旋转中心
3.2动画的执行过程：
两种： from to 百分比 0% 100%

二.标签属性

1. 当前行里面有剩余的空白：align-content: space-between;
2. 均分所有空白：space-around；
3. 把容器转化为弹性布局：display:flex;
4. 图形渐变：background: radial-gradient(red, red, red, red, red, red);
5. 线性渐变：background: linear-gradient(90deg,red,red)
6. 控制阴影向内inset：box-shadow: 0 0 10px red inset;
7. 动画名称：animation-name:animate；
8. 动画执行时间：animation-duration: 5s；.
9. 动画执行方式：animation-timing-function: linear;
   10.动画的延迟：animation-delay: 1s;
   11.动画播放多少次 ：animation-iteration-count: 1;
   12.动画是否播放：animation-play-state: running;
   13.动画停止到完成位置：animation-fill-mode: forwards;
   14.阴影：text-shadow: 0px 0px 1px white;
   15.设置旋转中心：transform-origin:0 50%;
   16.2d转3d：transform-style:preserve-3d;