马海雄-20201029

动画名称

 @keyframes 规则是创建动画。
            @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
             当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
             指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称
                                                                                            规定动画的时长


动画：播放时长
用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，
等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
animation-duration  规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function 动画的速度曲线。默认是 "ease"。

  向左移；background
自定义动画
   infinite：循环播放
   alternate:
   alternate-
控制是否播放：inherit：停止播放

盒子样式：
  不同部分的说明：

    Margin(外边距) - 清除边框外的区域，外边距是透明的。
    Border(边框) - 围绕在内边距和内容外的边框。
    Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    Content(内容) - 盒子的内容，显示文本和图像。
示例：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

所有HTML元素可以看作盒子，在CSS中，
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
小盒子 外边距 margin-top：20px
margin bottom
大盒子 内边距 padding


   auto：
    flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
    flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
    center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。

页面布局和定位：

块级标签和行级标签的属性转换
            1 块级标加float（浮动）就有了行级标签不能独占一行的特性
            特别注意使用浮动float时，外面一定加个标签包起来
边框：
    CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序
    在 CSS3 中，很容易创建圆角。
    在 CSS3 中 border-radius 属性被用于创建圆角：
示例：
在div中添加圆角元素：
div
{
border:2px solid;
border-radius:25px;
} 

总结：今天学到了非常多的知识，如何在css3中制作一个动画，并且改变它的各种动画效果，以及改变它们的布局方式。今天学到的知识要全部掌握并运用到以后的学习过程中。