css学习2

CSS3 动画

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

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

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

div
{
animation: myfirst 5s;
}

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

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

到最佳的浏览器支持，您应该始终定义 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;}
}

CSS3 多列

column-count 属性规定元素应该被分隔的列数：

column-count:3;

CSS3 规定列之间的间隔

column-gap 属性规定列之间的间隔：

column-gap:40px;

 

CSS3 列规则

column-rule 属性设置列之间的宽度、样式和颜色规则。

column-rule:3px outset #ff0000;     3px代表列之间那条线的粗细。

CSS3 用户界面

CSS3 Resizing

在 CSS3，resize 属性规定是否可由用户调整元素尺寸。

resize:both;

CSS3 Box Sizing

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

box-sizing:border-box;

utline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。轮廓与边框有两点不同：

• 轮廓不占用空间
• 轮廓可能是非矩形

outline-offset:15px;