周仁敏-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;*/ 
                             .
 

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

标签

评论

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