CSS3_过渡&动画&多列&用户界面

来源：互联网发布：insert into 重复数据编辑：程序博客网时间：2024/06/07 01:28

CSS3过渡 [transition]

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
属性值可以定义transition-property、transition-duration、transition-timing-function、transition-delay。

当鼠标点击一个区域时，为这个区域添加宽度变化过渡效果，过渡时间为2s

<!DOCTYPE html><html><head><style> div{    width:100px;    height:100px;    background:yellow;    transition:width 2s;                -moz-transition:width 2s;       /* Firefox 4 */    -webkit-transition:width 2s;    /* Safari and Chrome */  /* 为宽度变化添加过渡效果 */    -o-transition:width 2s;         /* Opera */}div:hover{    width:300px;}</style></head><body><div></div><p>请把鼠标指针放到黄色的 div 元素上，div会在2s内完成宽度的变更。</p><p><b>注释：</b>本例在 Internet Explorer 中无效。</p></body></html>

当鼠标点击一个区域时，为这个区域添加宽度、高度、旋转变化的过渡效果

<!DOCTYPE html><html><head><style> div{    width:100px;    height:100px;    background:yellow;    transition:width 2s, height 2s;    -moz-transition:width 2s, height 2s, -moz-transform 2s;         /* Firefox 4 */    -webkit-transition:width 2s, height 2s, -webkit-transform 2s;   /* Safari and Chrome */ /* 为宽度、高度、转换的变换添加过渡效果 */    -o-transition:width 2s, height 2s, -o-transform 2s;             /* Opera */}div:hover{    width:200px;    height:200px;    transform:rotate(180deg);    -moz-transform:rotate(180deg);      /* Firefox 4 */    -webkit-transform:rotate(180deg);   /* Safari and Chrome */    -o-transform:rotate(180deg);        /* Opera */}</style></head><body><div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div><p><b>注释：</b>本例在 Internet Explorer 中无效。</p></body></html>

CSS3动画 [animation]

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
需要定义一个@keyframes，然后在动画属性animation中引用这个定义。
动画包括以下几个属性：animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-play-state, animation-fill-mode。

当页面加载时，将一个区域背景色从红色变成黄色，持续时间5s，然后恢复红色

<!DOCTYPE html><html><head><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                /* 动画分为2个变化点: from, to */{    from {background:red;}    to   {background:yellow;}}@-moz-keyframes myfirst /* Firefox */{    from {background:red;}    to   {background:yellow;}}@-webkit-keyframes myfirst /* Safari and Chrome */{    from {background:red;}    to   {background:yellow;}}@-o-keyframes myfirst /* Opera */{    from {background:red;}    to   {background:yellow;}}</style></head><body><div></div><p><b>注释：</b>本例在 Internet Explorer 中无效。</p></body></html>

将一个区域绕着一个矩形的4个角旋转一周，并回到原地

<!DOCTYPE html><html><head><style> div{    width:100px;    height:100px;    background:red;    position:relative;    animation:myfirst 5s;    -moz-animation:myfirst 5s;      /* Firefox */    -webkit-animation:myfirst 5s;   /* Safari and Chrome */    -o-animation:myfirst 5s;        /* Opera */}@keyframes myfirst                  /* 动画时间分为5个时间点：0%, 25%, 50%, 75%, 100% */{    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;}}@-moz-keyframes myfirst     /* Firefox */{    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 and 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;}}@-o-keyframes myfirst       /* Opera */{    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;}}</style></head><body><p><b>注释：</b>本例在 Internet Explorer 中无效。</p><div></div></body></html>

CSS3多列

列数 [column-count]

规定元素应该被分隔的列数。

列间隔 [column-gap]

规定列之间的间隔。

列规则 [column-rule]

设置列之间的宽度、样式和颜色。

将一段文字分成3列，列间距为40px，分隔的列线为4px宽的红色实线：

<!DOCTYPE html><html><head><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;    /* 设置间隔列实线的宽度、颜色、样式 */    -moz-column-rule:4px outset #ff0000;    /* Firefox */    -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */    column-rule:4px outset #ff0000;}</style></head><body><p><b>注释：</b>Internet Explorer 不支持 column-count 属性。</p><div class="newspaper">人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。</div></body></html>

CSS3用户界面

调整元素尺寸 [resize]

定义一个区域，并且可在水平、垂直方向上进行调整大小

<!DOCTYPE html><html><head><style> div{    border:2px solid;    padding:10px 40px;     width:300px;    resize:both;    /* 可在水平、垂直方向上进行调整大小 */    overflow:auto;}</style></head><body><div>resize 属性规定是否可由用户调整元素尺寸。</div><p><b>注释：</b> Firefox 4+、Safari 以及 Chrome 支持 resize 属性。</p></body></html>

规定元素的边框如何绘制 [box-sizing]

此属性的值有以下几种：

值描述 conten-box 这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit 规定应从父元素继承 box-sizing 属性的值。

绘制2个并排的带边框方框:

<!DOCTYPE html><html><head><style> div.container{    width:30em;    border:1px solid;}div.box{    box-sizing:border-box;    -moz-box-sizing:border-box;    /* Firefox */    -webkit-box-sizing:border-box; /* Safari */    width:50%;    border:1px solid red;    float:left;}</style></head><body><div class="container">    <div class="box">这个 div 占据左半部分。</div>    <div class="box">这个 div 占据右半部分。</div></div></body></html>

在边框之外绘制轮廓 [outline-offset]

在一个区域边框外15px处绘制一个轮廓

<!DOCTYPE html><html><head><style> div{    margin:20px;    width:150px;     padding:10px;    height:70px;    border:2px solid black;    /* 设置轮廓的属性 */    outline:2px solid red;    outline-offset:15px;} </style></head><body><p><b>注释：</b>Internet Explorer 和 Opera 不支持 support outline-offset 属性。</p><div>这个 div 在边框边缘之外 15 像素处有一个轮廓。</div></body></html>

更多请参考：W3School

0 0