秀日措-20201029
知识总结
1.transform
transition:all 3s;/*过渡*/
transform:rotate(240deg);/*旋转*/
transform:scale(.4);/*缩放*/
transform:skew(45deg);/*倾斜*/
transform:translate(300px);/*平移*/
transform:matrix();/*扭曲(两行三列的三角函数矩阵)*/
2.keyform自定义动画
animation:change 3s ease 1s forwards infinite alternate inherit;
animation-----绑定动画 ,动画名称
3s-----动画播放时间
ease------动画播放轨迹
1s------延迟播放
forwards----让动画停到最后一帧
2----播放次数(两次) infinite-----无线播放
alternate----来回播放、正负播放
inherit-------停止播放
盒子模型
小盒子:外边距
margin-top;20px;
margin-bottom:20px;
大盒子:内边距
padding-top:20px
padding:20px;
margin:0 auto;水平居中
bordre-width:1px;
border-color:red;
border-style:solid;
box-sizing:content-box:/*盒子实际大小*/ content-box-->不包含边框
box-shadow:0px 0px 50px yellow inset;/*水平距离 垂直距离 模糊距离 盒子阴影*/
border-radius:30px;/*圆角*/
border-bottom-right-radius:100px;/*右下角*/
块级标签和行级标签的属性转化
1.块级标签加float(浮动)就有了行级标签不独占一行的特性
特别注意:使用float时,一定外面加个容器包起来
学习心得
虽然今天只上了下午的课,但是讲的知识点还是很多的,,但是只要
认真听讲和记好笔记就没法跟着老师一起操作,感觉自己有点跟不上
节奏,再者自己下去独立做作业时就会出现各种问题,导致实验无法
得到该得的结果。
近期评论