郭姗姗-20201029

知识点：

一、动画
      1、创建HTML文件：在html中引用css文件   <link rel="stylesheet" href="css/aa.css"/>
            <div class="box">使用类选择器
      2、创建css文件：.box{}    
            background:url(../img/tr.jpg);引用图片做背景
            transition:all 3s ease;      all 所有的背景等  ease匀速        
           ease-in匀加速  3s过渡时间；
            border-radius:100px;     边界是圆的            
            overflow: hidden;子容器超过父容器部分隐藏（写在父容器里）
            
            .box:hover{transform: rotateY(180deg);background: 
            url(icon.jpg.jpg);background-position: -1200px 0}
            旋停时发生改变     transform: rotateY  围绕Y轴旋转  
            deg->度数  旋转时图片为icon.jpg
            .box img{transition: all 3s;      图片旋转时过渡时间为3秒
            .box img:hover     图片旋停时旋转           transform: scale(1.5);    缩放       
             transform: skew(45deg);   倾斜
            transform: translate(300px);         平移：负的左 正的右 
            transform:matrix(-1,-1,-1,0,-1,1) ;    扭曲：两行三列的三角函数矩阵      
            transform 只能有一次 否则会覆盖
二、  自定义动画
  1、  创建HTML文件：在html中引用css文件           <link rel="stylesheet" href="css/aaa.css"/>
         <div class="box"></div>        使用类选择器
  2、创建css文件：.box{} 
        .box:hover{animation: change/*动画名称*/ 3s/*动画播放时间*/  ease/*播放轨迹*/ 
         1s/*延迟播放(隔一秒变)*/forwards /*让动画留在最后一帧*/
        /*2播放两次*/infinite/*播放次数无限*/ /*alternate running 来回播正负播  
        inherit控制是不是播放*/;
       @keyframes change/*名字*/   
        {/*from{background: red;}to{background: yellow;}        播放时从红色变为黄色
       0%{transform: scale(1.2);}3%{} 45%{}……   播放过程按要求发生改变
三、盒子模型
  1、 创建HTML文件：在html中引用css文件         <link rel="stylesheet"href="css/b.css" />
         <div class="bigbox"> <div class="smallbox"></div> </div>       
         定义类选择器  大小盒子
   2、创建css文件：
       .bigbox{}         
        border: 2px #dedede solid;         边框宽度颜色         padding-top: 100px  
        大盒子的内边距（left right bottom同理    padding包含所有）
        padding:100px ；                   写两个上下左右  写四个上右下左              
        box-sizing: content-box;           border-box包含边框  content-box不包含边框
        box-shadow: 0px 0px 50px yellow inset;         水平 垂直 模糊  边框阴影 内阴影 
        border-radius: 50%;圆角                    border-bottom-right-radius: 100px;右下角为圆角
        .smallbox{}
        margin-top: 100px;                小盒子的外边距（left right bottom同理    margin包含所有
  注:  div是块级标签，代码独占一行与内容多少无关
四、块级标签和行级标签的属性转换
  1、  创建HTML文件：在html中引用css文件   <link rel="stylesheet"  href="css/bbb.css"/> 
          <div class="page"> <div class="header"><div class="left"></div><div class="right">
          </div></div><div class="bottom"></div></div> 选择标签选择器
           特别注意使用浮动时 一定外面加个容器包起来  此次包容器为header    
  2、 创建css文件： *{margin: 0;padding: 0;border: 0; }      选择通用选择器（ 外边距 内边框 边框 ）
        .page{width: 600px;height: 600px;margin: 0 auto;border: 2px #dedede solid;}
        设置边框的宽度、高度、上下外边框距离为0 左右自动排列          边框:大小为2px 颜色灰色
        .header{}  left right的包容器
        .left{}          float: left;/*左边浮动*/            .right{}float: right;/*右边浮动*/
        .bottom{}  类选择器

心得体会：
今天的实验学到了很多，总共有四大部分，相对而言时间显得比较紧凑，所以有的部分先写下代码，课下练习，
有些代码来不及敲在电脑上，所以有部分功能在课下仍然会不能实现。今天学习的自定义动画，动画，盒子模型，
块级标签和行级标签的属性转换。感觉比较难的是，第一部分和最后一部分，第一部分有的部分还是没跟上，代码都写
上了，但是课下复习不知道是不是所有功能都实现，表示很喜欢镜子旋转那个模块，感觉很有意思。最后部分时间
紧凑，通用标签部分写错了，课下复习才发现原因。希望有时间多多温习，多多进益！