CSS3 学习（二）

 

CSS3 动画

要创建CSS3动画，你将不得不了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

例：

@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }

语法：@keyframes animationname {keyframes-selector {css-styles;}}

animationname：必需的。定义animation的名称。

keyframes-selector：必需的。动画持续时间的百分比。合法值：0-100%、from (和0%相同)、to (和100%相同)

css-styles：必需的。一个或多个合法的CSS样式属性

使用简写属性把 animation 绑定到一个<div> 元素

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name：指定要绑定到选择器的关键帧的名称

animation-duration：动画指定需要多少秒或毫秒完成

animation-timing-function：设置动画将如何完成一个周期（linear， ease， ease-in， ease-out， ease-in-out， cubic-bezier(n,n,n,n)）

animation-delay：设置动画在启动前的延迟间隔。

animation-iteration-count：定义动画的播放次数。（infinite： 无限次）

animation-direction：指定是否应该轮流反向播放动画。（normal： 动画按正常播放， reverse： 动画反向播放， alternate： 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放， alternate-reverse： 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放）

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-play-state：指定动画是否正在运行或已暂停。（可以用js控制动画的启动与暂停）

CSS3 多列

columns：语法：columns: column-width column-count;（设置列的宽度和列数）

column-rule：语法：column-rule: column-rule-width column-rule-style column-rule-color;（设置列中之间border的宽度规则和样式规则和颜色规则）

column-gap：指定列与列之间的间隙

column-span：指定元素要跨越多少列（在按列划分的区域内使用标签时起作用）

CSS3 用户界面

resize： 指定一个元素是否是由用户调整大小（none： 用户无法调整元素的尺寸。both： 用户可调整元素的高度和宽度。horizontal： 用户可调整元素的宽度。vertical： 用户可调整元素的高度。）

box-sizing： 允许你以适应区域而用某种方式定义某些元素（content-box设置的宽和高不会将padding和border计算在内。border-box反之）

CSS 图片

图片文字居中：

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
	margin-top:-9px;
}
<div class="container">
  <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="center">居中</div>
</div>

CSS3 弹性盒子(Flex Box)（display: flex）

flex-direction: 指定了弹性容器中子元素的排列方式(row: 横向正序排列 row-reverse: 横向反序排列 column: 纵向正序排列 column-reverse: 纵向反序排列)

justify-content: 设置弹性盒子元素在主轴（横轴）方向上的对齐方式（flex-start：默认值。项目位于容器的开头 flex-end：项目位于容器的结尾 center：项目位于容器的中心，居中 space-between：项目位于各行之间留有空白的容器内，不算上边上两个，其他的子项会瓜分所有留白空间，所以左右两边没有留白  space-around：项目位于各行之前、之间、之后都留有空白的容器内，算上所有子项瓜分留白空间，所以左右两边会有中间子项的间距一半的留白，其实是因为所有子项参与瓜分的结果）

align-items: 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式（stretch：默认值。元素被拉伸以适应容器 center：元素位于容器的中心， 垂直 flex-start：元素位于容器的开头，一般来说会在最上面，从最前面开始排列 flex-end：元素位于容器的结尾，一般来说会在最下面，从最后面开始排列 baseline：元素位于容器的基线上，如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效）

flex-wrap: 设置弹性盒子的子元素超出父容器时是否换行（nowrap：默认值。规定灵活的项目不拆行或不拆列 wrap：规定灵活的项目在必要的时候拆行或拆列 wrap-reverse：规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序）。

align-content: 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐（stretch：默认值。元素被拉伸以适应容器，所处位置不会改变 center：各行向弹性盒容器的中间位置堆叠 flex-start：元素位于容器的开头 flex-end： 元素位于容器的结尾 space-between：元素位于各行之间留有空白的容器内 space-around：元素位于各行之前、之间、之后都留有空白的容器内）

flex-flow: flex-direction 和 flex-wrap 的简写

子项属性：

order： 设置弹性盒子的子元素排列顺序

align-self： 在弹性子元素上使用。覆盖容器的 align-items 属性（auto：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch" stretch：元素被拉伸以适应容器 center：元素位于容器的中心 flex-start：元素位于容器的开头 flex-end：元素位于容器的结尾 baseline：元素位于容器的基线上）

flex： 设置弹性盒子的子元素如何分配空间（flex: flex-grow（一个数字，规定项目将相对于其他灵活的项目进行扩展的量） flex-shrink（一个数字，规定项目将相对于其他灵活的项目进行收缩的量） flex-basis：项目的长度  auto： 与 1 1 auto 相同）