佘慧婕-20201029
一、知识点总结
(一)动画
1、ease匀速 ease-in匀加速 ease-out匀减速,此后跟秒数
all是所有都有后续效果,all后也可跟秒数
过渡一般不会写在伪类选择里,一般放在类选择器里
2、伪类选择器中transition中的各类:
rotate旋转,rotateY延y轴旋转
scale(1.5);缩放,>1放大 1>x>0缩小
skew倾斜
translate()平移
matrix()扭曲,其中它的参数是一个两行三列的三角函数矩阵,如transform: matrix(-1,-1,-1,0,1,1)
3、如果让很多动画同时出现:
就在同一个transition中用空格将每一个动画的程序分隔开来,如transform: scale(1.2) rotate(360deg) skew(1.5);
4、使子容器超出父容器的部分隐藏:overflow: hidden;
(二)自定义动画
1、animation:change 3s;其中分别是:绑定动画; 动画名称、播放时间
2、animation: change 3s ease 1s forwards infinite alternate running;其中依次是:动画名称、播放时间 、播放轨迹、延迟时间、停留在最后一帧、播放次数、infinite循环播放、在infi后alterna交替循环播放、running播放、inherit不让播放
3、更换背景颜色:@keyframes change
4、通过XX%{}可以定义在不同时段的动画样式
(三)盒子模型
1、边距:
(1) 外边距margin:margin-top上外边距、margin-bottom下外边距
(2)内边距(也叫内填充,当设置了padding时相当于设置的那一块被填充了):padding-top上内边距,最后bigbox的大小于原设置宽高+padding的px
(3)如果是padding:100px 200px 300px 100px(上 右 下 左)
如果是padding:100px 200px(上下 左右)
如设置边距大小一样可简写margin:...px padding也一样
margin是最底层的,顺序依次是border、content、padding、background-image、background-color、margin
2、边框
(1)dashed虚线
(2)box-sizing: content-box;/*不包含边框*/ ;box-sizing: border-box;/*包含边框*/
(3)盒子边际阴影:外阴影(默认)box-shadow: 3px 3px 3px yellow;仅右边和下边有,前两值都为0则每个边都有
(4)内阴影: box-shadow: 3px 3px 3px yellow inset;
3、圆角
(1)border-radius: 50%;/*圆角*/
(2)border-radius: 30px;/*圆角*/方角变圆角
(3)左下角变圆角:border-bottom-left-radius: 100px;
(4)border-bottom-right-radius: ;右下角 ;border-top-left-radius: ;左上角
(四)块标签和行级标签的属性转化
1、块级标签加float(浮动)就有了行级标签不独占一行的特点
特别注意:使用浮动时,一定外面再加个标签使其嵌套起来,加个容器(标签)包起来
2、向左浮动:float: left; 向右浮动:float: right;
二、学习心得
今天的课程开始听的时候有一点点跟不上,但是后面逐渐就能跟上节奏了,知识点也都听得懂,基本上没有对知识点的疑问,有的都当堂解决了。
近期评论