CSS3 简介（二）

青旅半醒 2021-09-14 09:58 321阅读 0赞

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