CSS3 简介 （二）

CSS3 动画

@keyframes myfirst{    from {background: red;}    to {background: yellow;}}@-webkit-keyframes myfirst /* Safari 与 Chrome */{    from {background: red;}    to {background: yellow;}}div{    animation: myfirst 5s;    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */}

CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes myfirst{    0%   {background: red; left:0px; top:0px;}    25%  {background: yellow; left:200px; top:0px;}    50%  {background: blue; left:200px; top:200px;}    75%  {background: green; left:0px; top:200px;}    100% {background: red; left:0px; top:0px;}}@-webkit-keyframes myfirst /* Safari 与 Chrome */{    0%   {background: red; left:0px; top:0px;}    25%  {background: yellow; left:200px; top:0px;}    50%  {background: blue; left:200px; top:200px;}    75%  {background: green; left:0px; top:200px;}    100% {background: red; left:0px; top:0px;}}

执行动画

div{    animation-name: myfirst;    animation-duration: 5s;    animation-timing-function: linear;    animation-delay: 2s;    animation-iteration-count: infinite;    animation-direction: alternate;    animation-play-state: running;    /* Safari 与 Chrome: */    -webkit-animation-name: myfirst;    -webkit-animation-duration: 5s;    -webkit-animation-timing-function: linear;    -webkit-animation-delay: 2s;    -webkit-animation-iteration-count: infinite;    -webkit-animation-direction: alternate;    -webkit-animation-play-state: running;}

CSS3 多列布局
CSS3 多列属性
本章节我们将学习以下几个 CSS3 的多列属性:

CSS3 多列属性下表列出了所有 CSS3 的多列属性：属性  描述column-count    指定元素应该被分割的列数。column-fill 指定如何填充列column-gap  指定列与列之间的间隙column-rule 所有 column-rule-* 属性的简写column-rule-color   指定两列间边框的颜色column-rule-style   指定两列间边框的样式column-rule-width   指定两列间边框的厚度column-span 指定元素要跨越多少列column-width    指定列的宽度columns 设置 column-width 和 column-count 的简写

几行div {    -webkit-column-count: 3; /* Chrome, Safari, Opera */    -moz-column-count: 3; /* Firefox */    column-count: 3;}

间距div {    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */    -moz-column-gap: 40px; /* Firefox */    column-gap: 40px;}

列边框div {    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */    -moz-column-rule-style: solid; /* Firefox */    column-rule-style: solid;}

column-rule-width 属性指定了两列的边框厚度:

div {    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */    -moz-column-rule-width: 1px; /* Firefox */    column-rule-width: 1px;}

column-rule-color 属性指定了两列的边框颜色：

div {    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */    -moz-column-rule-color: lightblue; /* Firefox */    column-rule-color: lightblue;}

column-rule 属性是 column-rule-* 所有属性的简写。
以下实例设置了列直接的边框的厚度，样式及颜色：

div {    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */    -moz-column-rule: 1px solid lightblue; /* Firefox */    column-rule: 1px solid lightblue;}

指定列的宽度
column-width 属性指定了列的宽度。

div {    -webkit-column-width: 100px; /* Chrome, Safari, Opera */    column-width: 100px;}