CSS3 简介（二）

最新推荐文章于 2025-12-07 22:06:53 发布

原创最新推荐文章于 2025-12-07 22:06:53 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画

H5+Css3 专栏收录该内容

5 篇文章

订阅专栏

本文介绍CSS3动画的基本概念及其使用方法，包括@keyframes规则定义动画、animation属性控制动画行为等内容，并详细讲解了CSS3多列布局的实现方式，如column-count和column-gap等属性的应用。

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

CSS3 简介 （二）

CSS3 简介（二）