CSS3 互动版

新增属性选择器
简介 匹配属性值——开始值 匹配属性值——包含值 匹配属性值——结尾值
新增结构伪类选择器
简介 选择首个子元素 选择末尾子元素 选择首个类型子元素 选择末尾类型子元素 选择一或多个子元素 选择类型子元素(倒序) 选择指定类型元素 选择父元素的特定子元素(倒序) 选择有唯一子元素的元素 选择元素的子元素并类型是唯一的子元素 选择内容为空的元素
CSS3 圆角边框
简介 border-radius属性 border-radius中指定两个半径 不显示边框 修改边框种类 绘制四个角不同半径的圆角边框 CSS3 圆角边框练习
CSS3 图像边框
简介 border-image属性 border-image属性最简单的使用方法 使用border-image属性来指定边框宽度 中央图像自动拉伸 指定四条边中图像的显示方法 使用背景图像
CSS3 背景
简介 background-size 属性（调整图片大小） background-size 属性（背景图片拉伸） background-origin 属性 多重背景图片 background-clip 属性 新的背景属性
CSS3 文本效果
简介 text-shadow属性使用方法 位移距离 阴影的模糊半径 阴影的颜色 指定多个阴影 自动换行
CSS3 字体
使用您需要的字体 使用粗体文本 CSS3 字体描述符
CSS3 2D 转换
简介 2D 转换 translate() 方法 rotate() 方法 scale() 方法 skew() 方法 matrix() 方法 新的转换属性 2D Transform 方法
CSS3 3D 转换
简介 如何工作与浏览器支持 rotateX() 方法 rotateY() 旋转 转换属性 2D Transform 方法
CSS3 过渡
简介 如何工作 多项改变 过渡属性 使用了简写的 transition 属性
CSS3 动画
简介 实例 CSS3 动画 什么是 CSS3 中的动画？ 实例改变背景色和位置 CSS3 动画属性 包含所有动画属性实例 使用了简写的动画 animation 属性
CSS3 多列
简介 CSS3 创建多列 CSS3 规定列之间的间隔 CSS3 列规则 新的多列属性
CSS3 用户界面
简介 CSS3 Resizing CSS3 Box Sizing CSS3 Outline Offset 新的用户界面属性
  1. 全部教程
  2. CSS3
  3. CSS3
  4. 使用了简写的动画 animation 属性

实例 使用了简写的动画 animation 属性

与前面的动画相同，但是使用了简写的动画 animation 属性：

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

$v.lab.setValue({ active:'css', html:' <!DOCTYPE HTML>\n

\n

\n \n

\n

注释：本例在 Internet Explorer 中无效。

\n

\n \n \n', css:' div\n {\n width:100px;\n height:60px;\n background:red;\n position:relative;\n animation:myfirst 5s linear 2s infinite alternate;\n / Firefox: /\n -moz-animation:myfirst 5s linear 2s infinite alternate;\n / Safari and Chrome: /\n -webkit-animation:myfirst 5s linear 2s infinite alternate;\n / Opera: /\n -o-animation:myfirst 5s linear 2s infinite alternate;\n }\n

@keyframes myfirst\n {\n 0% {background:red; left:0px; top:0px;}\n 25% {background:yellow; left:200px; top:0px;}\n 50% {background:blue; left:200px; top:200px;}\n 75% {background:green; left:0px; top:200px;}\n 100% {background:red; left:0px; top:0px;}\n }\n

@-moz-keyframes myfirst / Firefox /\n {\n 0% {background:red; left:0px; top:0px;}\n 25% {background:yellow; left:200px; top:0px;}\n 50% {background:blue; left:200px; top:200px;}\n 75% {background:green; left:0px; top:200px;}\n 100% {background:red; left:0px; top:0px;}\n }\n

@-webkit-keyframes myfirst / Safari and Chrome /\n {\n 0% {background:red; left:0px; top:0px;}\n 25% {background:yellow; left:200px; top:0px;}\n 50% {background:blue; left:200px; top:200px;}\n 75% {background:green; left:0px; top:200px;}\n 100% {background:red; left:0px; top:0px;}\n }\n

@-o-keyframes myfirst / Opera /\n {\n 0% {background:red; left:0px; top:0px;}\n 25% {background:yellow; left:200px; top:0px;}\n 50% {background:blue; left:200px; top:200px;}\n 75% {background:green; left:0px; top:200px;}\n 100% {background:red; left:0px; top:0px;}\n }\n ' });