陈霞-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;/*子容器超出父容器的部分隐藏*/

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1