佘慧婕-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;

二、学习心得
今天的课程开始听的时候有一点点跟不上,但是后面逐渐就能跟上节奏了,知识点也都听得懂,基本上没有对知识点的疑问,有的都当堂解决了。

标签

评论

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