马海雄-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中制作一个动画,并且改变它的各种动画效果,以及改变它们的布局方式。今天学到的知识要全部掌握并运用到以后的学习过程中。

标签

评论

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