CSS3.0学习笔记(W3C) 下
2013-12-13 13:12
288 查看
七、CSS3 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
具体请查看W3C
八、CSS3 动画
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
CSS3 动画
当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
规定动画的名称
规定动画的时长
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
使用from,to:
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 { 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;} }
使用百分比:
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;} }
九、CSS3 多列
通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!在本章中,您将学习如下多列属性:
column-count
规定元素应该被分隔的列数
column-gap
规定列之间的间隔
column-rule
设置列之间的宽度、样式和颜色规则
div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; }
div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari 和 Chrome */ column-gap:40px; }
div { -moz-column-rule:3px outset #ff0000; /* Firefox */ -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */ column-rule:3px outset #ff0000; }
十、CSS3 用户界面
在 CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。在本章中,您将学到以下用户界面属性:
resize
规定是否可由用户调整元素尺寸
box-sizing
允许您以确切的方式定义适应某个区域的具体内容
outline-offset
对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓
resize
div { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; }
box-sizing
规定两个并排的带边框方框:
div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; }
outline-offset
轮廓与边框有两点不同:
轮廓不占用空间
轮廓可能是非矩形
div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; }
相关文章推荐
- CSS3.0学习笔记(W3C) 上
- w3c validator:CSS/HTML4.01/XHTML1.0 XiaoZhu.com 都顺利通过 :)
- 让通过w3c验证的三种方法
- W3C专业术语翻译对照表
- 怎样过渡到W3C?
- 将CSS样式写为JS格式,以通过W3C校验
- JAVA操作XML的完整例子——W3C DOM篇
- 使用W3C XML Schema(7)
- W3C成立工作组建立扩展Web服务一系列标准
- 如何使我们的网站符合W3C网络标准,让IE8能够正常访问呢?
- 网站进行W3C XHTML1.0验证的经验
- 网站如何达到W3C标准?网页如何通过W3C验证?
- W3C教程(13):W3C WSDL 活动
- 关于AI planning W3C论坛转载
- w3c组织给出html4的样式建议
- JavaScript让IE浏览器event对象符合W3C DOM标准
- ie6 大环境下暂时不要考虑w3c标准
- W3C键值对应表
- IIS W3C日志记录字段和HTTP状态代码的说明
- 符合W3C的网站的开发模型和必要性的探讨(二)