周仁敏-20201029

知识总结

（回顾）选择器=>镜子：精确选中修饰的目标     css3.0：层叠样式表->修饰网页
                   css3.0：层叠样式表->修饰网页
                    0、通用择器       1、类选择器    2、标签选择器       3、标签选择器        4、后代选择器      5、伪类选择器（鼠标悬停状态hovre）                                                                                                                                
                   类选择的优先级高于标签选择器
                   id高于类 类高于标签
       （今日总结）动画
                              .box
                                    width:200px;
                                    height;200px;
                                    background:red;
                                    margin:0 auto;
                                    transform;all 3s ease;/*过度*/
                                    transform;10s ease-in 3s;/*过度*/
                                    transform;background  3s ease-in 3s;/*过度*/
                                    border:2px yellow solid;
                                   /*background:url（../img/u.jpg);
                                   overfiow：hidden；/*子容器超出父容器的部分隐藏*/
                                   background-size:190px 230px
                            .box :hover
                                   background:url(../img/u.jpg)                                  
                                   background-position:-120:0;

       伪类选择器       .box :hover
                                    transform:rotate(360deg);/*旋转*/
                                    width;600px
                                    background:yellow;
       悬停的时候能选到（放在类选择器）
                              .box :hover
                                     transform:rotate  x/z/y(360deg);/*旋转*/   
                                     transform:scale(数字);/*缩放*/    
                                     transform:skew(45deg);/*倾斜*/   （-45）
                                     transform:translate(300px);/*平移*/        
                                     transform:matrix(-1，-1，-1,0,-1,1);/*扭曲；两行三列的三角函数矩阵*/              
       (自定义动画)     <link rel>
                               .box                    
                                    width:200px;
                                    height;200px;
                                    background:red;
                                    margin:0 auto;
                                    animation:change 3s;
                             .box :hover
                                   animation:change 3s ease 1s forwards（数字）；                        （infinite循环播放）
                                   
                                  @keyframes change{
                                    from{
                                           background:red;
                                    }
                                    to{
                                           background：yellow；
                                    }

                            .bigbox
                                    width:200px;
                                    height;200px;
                                    border:2px#dedede solid;
                                    padding:100pa;
                                    box-sizing:content-box;/*盒子实际大小*/
                                    box-shadow:0px 0px 50px yellow inset;/*盒子阴影*/
                                    /*border-radins:30px;*//*圆角*/
                                    border-top-left-radius:200px
                                    border-top-right-radius:200px
                                    border-bottom-left-radiuss;200px
                            .smallbox
                                    width:200px;
                                    height;200px;  
                                    background:yellow;
                                    /*margin-top100px;
                                    margin-left100px;*/ 
                             .
 

学习心得
今天的实训内容有点难，感觉很难做出来，我也很努力的在学习，但是当我自己打了一遍其实也没有那么难，
并且我也没有错过任何学习的机会，也在不断发现问题和解决问题的过程中学了很多知识，也增强了我的动手能力。
这个实训让我觉得很充实，比前几次的更有趣一些，动画的制作感觉很好玩，明天的实验应该会更有趣，对这一方面
我比较有兴趣，我会好好学的，加油！

、