李永娟-20201029

box-shadow: 0px (水平 )   0px(垂直)   50px( 模糊距离)  yellow inset(阴影);
</head>
    <body>
    <!--块标签和行标签的属性转化
    1.块级标签加float(浮动)就有了行标签不独占有一行的特性
    特别注意:使用float(浮动)时,一定要加个容器包起来
    -->
    <div class="page">
    <div class="header">
        <div class="left"></div>
        <div class="right"></div>
                    </div>
                    < div class="bottom"></div>
        </div>
    </body>
    <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/indexxx.css"box">
        </head>
    <body>
        <!--盒子模型-->
        <div class="bigbox">
            <div class="smallbox"></div>
        </div>
    </body>
bigbox{
    width: 200px;
    height: 200px;
    background: orange;
    border: 2px #dedede solid;
    padding: 100px;
    box-sizing: content-box;/*盒子实际大小*/
    box-shadow: 0px  0px   50px  yellow inset;/*盒子阴影*/
    /*border-radius: 30px;*//*圆角*/
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 200px;
}
.smallbox{
    width: 200px;
    height: 200px;
    background: greenyellow;
    /*margin-top: 100px;
    margin-left: 100px;*/
}
.box{
    
    margin: 0 auto ;
    border: 2px yellow solid;
    border-radius:100px ;
    background: url(../../img/lyj.jpg);
    background-size:190px 230px ;
    overflow: hidden;/*子容器超出父容器的部分隐藏*/
    transition:all 3s ease;/*过渡ease-in:匀加速,ease-in 3s:延迟,3S后匀加速*/
    }
.box:hover{
        transform:rotate(360deg);/*旋转*/
        transform: scale(0);/*缩放*/
        transform: skew(0);/*倾斜*/
        transform:translate(0);
        transform: matrix(1,-1,-1,0,-1,1);/*扭曲两行三列的三角函数矩阵*/
        background: url(../../img/llyj.jpg);
    }
.box img{
    transition: all 3s;
}
.box img:hover{
    transform: scale(1,2);
}
.box:hover{
    animation: change(动画名称) 3s ease(播放轨迹) 2s forwards(播放次数) infinite alternate(交替播放) running(动画播放);
}

心得体会:每天都有每天的新内容,怎么说呢,就是感觉反射弧还是有点长,反应还是很慢,不怎么行,还得多加练习才是,没有老师的督促,
自己在课下练习效果不是很乐观,一遇到不会的就坚持不下去了,希望在剩下的几天时间里能好好坚持做好每一步。

标签

评论

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