李永娟-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(动画播放);
}
心得体会：每天都有每天的新内容，怎么说呢，就是感觉反射弧还是有点长，反应还是很慢，不怎么行，还得多加练习才是，没有老师的督促，
自己在课下练习效果不是很乐观，一遇到不会的就坚持不下去了，希望在剩下的几天时间里能好好坚持做好每一步。
近期评论