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;
}