陈霞-20201029

一、知识总结

1.动画
transition:all 3s;/*过渡*/  （一般不放在伪类选择器）
transition:all  ease;/*匀速过渡*/
transition:all  ease-in;/*匀加速过渡*/
transition:all  ease-out;/*匀减速过渡*/
transition:all  ease-in 3s;/*延迟播放*/
transform: rotate (360deg);/*旋转*/（默认以Z轴旋转）
transform: rotatex (360deg);/*以X轴旋转*/
transform: rotatey (360deg);/*以Y轴旋转*/
scale(0.7);/*缩放*/
skew(45deg);/*倾斜*/  （正数为向左，负数为向右）
translate(300px);/*平移*/  （向右平移为正，向左为负）
matrix(-1,-1,-1,0,-1);/*扭曲：2行3列的三角函数矩阵*/
backwards:让动画停在最后一帧
change:动画名称
ease：时间
forwards:轨迹
2.盒子模型
小盒子：外边距    margin-top:2opx;      大盒子：内边距   padding-top:20px;
box-sizing:content-box;/*盒子实际大小*/
box-shadow: 0px  0px  50px  yellow inset;/*盒子阴影*/
border-radius:50%;/*圆角*/    border-radius:30px;/*圆角*/
border-bottom-left-radius:100px;/*左下角*/
border-top-right-radius:100px;/*右下角*/
margin:边距    margin-top:表示上外边距    margin-right:表示右外边距    margin-bottom:表示底外边距    margin-left:表示左外边距
块标签和行标签的属性转化: 块级标签加float(浮动)就有了行级标签不独占一行的标签。 特别注意：使用float时，一定外面加个容器包起来。
float: left;/*浮动*/     float: rigjt;/*浮动*/
overflow:hidden;/*子容器超出父容器的部分隐藏*/

二、心得体会
今天学习了动画的过渡、旋转、缩放、倾斜、平移、扭曲、延迟播放等知识，跟着老师的节奏做出来的感觉很好，很开心，还学习了盒子模型里的盒子阴影、浮动等，知道了如何如何设计盒子的摆放位置，总结起来知识点好像不太多，但理解和记忆起来还是很难，记忆的英文、知识点太杂了，还好老师讲的很详细，整体下来记忆还是挺深刻的，感觉很有意义，很有趣，希望自己一天比一天的进步，加油。