学习笔记-CSS-2017.2.18

CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background:red;}
    to {background:yellow;}
}
</style>
</head>
<body>

<div></div>

</body>

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变

<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s; /* Opera */
}

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

@-moz-keyframes myfirst /* Firefox */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}
</style>

CSS3 多列

1、将 <div> 元素中的文本分为 3 列:

<style> 
.newspaper
{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}
</style>

2、多列中列与列间的间隙:
column-gap 属性指定了列与列间的间隙。

<style> 
.newspaper
{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;

    -moz-column-gap:40px; /* Firefox */
    -webkit-column-gap:40px; /* Safari and Chrome */
    column-gap:40px;
}
</style>

3、列边框

<style> 
.newspaper
{
    column-count:3;
    column-gap:40px;
    column-rule-style:outset;
    column-rule-width:10px;

    /* Firefox */
    -moz-column-count:3;
    -moz-column-gap:40px;
    -moz-column-rule-style:outset;
    -moz-column-rule-width:10px;

    /* Safari and Chrome */
    -webkit-column-count:3;
    -webkit-column-gap:40px;
    -webkit-column-rule-style:outset;
    -webkit-column-rule-width:1px;
}
</style>

4、指定元素跨越多少列

<style> 
.newspaper
{
    column-count:3;
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */

}
h2
{
    column-span:all;
    -webkit-column-span:all; /* Safari and Chrome */
}
</style>

5、指定列的宽度

<style> 
.newspaper
{
    column-width:100px;
    -moz-column-width:100px; /* Firefox */
    -webkit-column-width:100px; /* Safari and Chrome */
}
</style>

CSS3 用户界面

1、调整尺寸(Resizing)

<style> 
div
{
    border:2px solid;
    padding:10px 40px; 
    width:300px;
    resize:both;
    overflow:auto;
}
</style>

2、外形修饰（outline-offset ）

<style> 
div
{
    margin:20px;
    width:150px; 
    padding:10px;
    height:70px;
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
} 
</style>

3、方框大小调整(Box Sizing)

<style> 
div.container
{
    width:30em;
    border:1em solid;
}
div.box
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    border:1em solid red;
    float:left;
}
</style>

学习笔记-CSS-2017.2.18

CSS3 动画

CSS3 多列

CSS3 用户界面

推荐阅读更多精彩内容