CSS笔记

8.23

1.动画效果

1.1.调用方法

语法：   创建动画：@keyframes   调用动画：animation

其中调用属性有几个属性值如下表

参数值	效果
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function	规定动画的速度曲线。默认是 "ease"
animation-delay	规定动画何时开始。默认是 0
animation-iteration-count	规定动画被播放的次数（number类型）。默认是 1，（infinite: 无限次）
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal" ，‘alternate'
animation-play-state	规定动画是否正在运行或暂停。默认是 "running",'paused'
animation-fill-mode	规定对象动画时间之外的状态.forwards,backwards默认值

1.2.原理阐释

通过 @keyframes(关键帧动画) 规则，您能够创建动画。 2、创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。 3、以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 4、为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 5、在CSS样式中，用animation属性来应用 @keyframes所定义的动画

1.3.个人释义

通过规定不同时间段的状态以及样式，使原本静止的图片按照一定的方式进行改变.

其中百分之几十其实是时间段，百分号后面的花括号表示到达百分之几十的时间达成设置的状态以及样式

1.4.css释义

/* @keyframs创建动画效果  后跟动画的名称自己起名字最好遵守命名规则*/
@keyframes 动画名称{
/* 百分比表示百分之几的时间 */
    ？%{
/* 内填写时间过程中要达成的某种状态 */
      属性:属性值;
    }
/* 时间 */
    ？%{
/* 状态 */
      属性:属性值;
    }
  }

2.多列布局

多列布局有七种属性，他写在父元素中，为父元素中的子元素进行pailie

2.1.列宽

column-width： auto；

auto：根据column-count属性自定分配宽度

设置对象的宽度；使用像素表示。

2.2.列数

column-count：auto；

auto：根据column-width属性自定分配宽度

用来定义对象中的列数，使用数字 1-10表示。

2.3.同时设置列宽和列数

columns: column-width属性值 || column-count属性值；

设置对象的列数和每列的宽度。

复合属性：宽度和列数的合成；

2.4.列和列之间的间距

column-gap: normal ||  length； 

normal是默认值，为1em， length 是用来设置列与列之间的间距。

2.5.列和列之间的边框

column-rule：column-rule-width属性值  || column-rule-style属性值 || column-rule-color属性值 

设置对象的列与列之间的边框。

复合属性：包括边框的粗细，颜色，样式 样式： dotted 点状边框 dashed 虚线 double 双线 solid 实线

2.6.列高是否统一

column-fill：auto || balance；

设置对象所有列的高度是否统一;

auto： 列高度自适应内容; balance： 所有列的高度以其中最高的一列统一 两个效果基本上一样，没有太大变化

2.7.横跨多少列

column-span：1|all；

属性规定元素应横跨多少列。

默认为1，一般情况下设置为all