前端大本营

HTML5,CSS3,Responsive,资料站

box-ordinal-group 说明

box-ordinal-group属性, 指定元素内子元素排列顺序指定时使用。<规定框中子元素的显示次序。> 子要素的排列顺序,必须制定自然数(不包含0的正整数)。

属性值

数值 不包含0的正整数 默认值 1
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-ordinal-group </title>
<style>
div.prefix_sample1 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
-ms-box-orient:horizontal;
-moz-box-direction:normal;
-webkit-box-direction:normal;
-o-box-direction:normal;
-ms-box-direction:normal;
}
div.prefix_sample2 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
-ms-box-orient:horizontal;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
-o-box-direction:reverse;
-ms-box-direction:reverse;
}
div.prefix_sample3 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
-moz-box-direction:normal;
-webkit-box-direction:normal;
-o-box-direction:normal;
-ms-box-direction:normal;
}
div.prefix_sample4 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
-o-box-direction:reverse;
-ms-box-direction:reverse;
}

div.aka {
background-color:red;
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
-o-box-ordinal-group:3;
-ms-box-ordinal-group:3;
}
div.midori {
background-color:green;
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
-moz-box-ordinal-group:1;
-ms-box-ordinal-group:1;
}
div.ao {
background-color:blue;
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
-o-box-ordinal-group:2;
-ms-box-ordinal-group:2; 
}
</style>

</head>

<body>
<h4>box-orient:horizontal </h4>
<div class="prefix_sample1">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-orient:vertical </h4>
<div class="prefix_sample2">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-orient:inline-axis </h4>
<div class="prefix_sample3">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-orient:block-axis </h4>
<div class="prefix_sample4">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>
</body>
</html>

</body>
</html>
实例图  box-ordinal-group
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | box-ordinal-group 元素内子要素排列顺序指定 —— CSS3 参考 框布局已关闭评论

box-direction 说明

box-direction属性, 指定元素内子元素方向指定时使用。<属性规定框元素的子元素以什么方向来排列> box-direction属性值为normal的时候,子元素按从左到右的方向排列。 reverse的时候,按照反方向进行排列。 当overflow的值为visible,scroll,auto的时候,到达元素边界时 box-direction的值为normal的时候,内容会从右侧下面排列,reverse的时候从左侧上面排列。

属性值

normal 子要素按照左到右的顺序进行排列。<以默认方向显示子元素。> reverse 子要素按照上到下的书序进行排列。<以反方向显示子元素。> inherit 按照父元素的值来排列<应该从子元素继承 box-direction 属性的值>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-orient </title>
<style>
div.prefix_sample1 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
-ms-box-orient:horizontal;
-moz-box-direction:normal;
-webkit-box-direction:normal;
-o-box-direction:normal;
-ms-box-direction:normal;
}
div.prefix_sample2 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
-ms-box-orient:horizontal;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
-o-box-direction:reverse;
-ms-box-direction:reverse;
}
div.prefix_sample3 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
-moz-box-direction:normal;
-webkit-box-direction:normal;
-o-box-direction:normal;
-ms-box-direction:normal;
}
div.prefix_sample4 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
-o-box-direction:reverse;
-ms-box-direction:reverse;
}

div.aka {background-color:red;}
div.midori {background-color:green;}
div.ao {background-color:blue;}
</style>

</head>

<body>
<h4>box-orient:horizontal </h4>
<div class="prefix_sample1">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-orient:vertical </h4>
<div class="prefix_sample2">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-orient:inline-axis </h4>
<div class="prefix_sample3">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-orient:block-axis </h4>
<div class="prefix_sample4">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>
</body>
</html>

</body>
</html>
实例图  box-direction
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | box-direction 元素内子要素方向指定 —— CSS3 参考 框布局已关闭评论

box-orient 说明

box-orient属性, 指定元素内子元素配置方向时使用。<规定框的子元素应该被水平或垂直排列> box-orient属性,需指定元素为display:box;或是display:inline-box时可以使用

属性值

horizontal 子要素按照左到右的顺序进行排列。<在水平行中从左向右排列子元素。> vertical 子要素按照上到下的书序进行排列。<从上向下垂直排列子元素。> inline-axis 子要素按照inline轴进行排列(默认值)<沿着行内轴来排列子元素(映射为 horizontal)。> block-axis 按照block轴进行排列<沿着块轴来排列子元素(映射为 vertical)。> inherit 按照父元素的值来排列<应该从父元素继承 box-orient 属性的值。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-orient </title>
<style>
div.prefix_sample1 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
-ms-box-orient:horizontal;
}
div.prefix_sample2 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
}
div.prefix_sample3 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:inline-axis;
-webkit-box-orient:inline-axis;
-o-box-orient:inline-axis;
-ms-box-orient:inline-axis;
}
div.prefix_sample4 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:block-axis;
-webkit-box-orient:block-axis;
-o-box-orient:block-axis;
-ms-box-orient:block-axis;
}

div.aka {background-color:red;}
div.midori {background-color:green;}
div.ao {background-color:blue;}
</style>

</head>

<body>
<h4>box-orient:horizontal </h4>
<div class="prefix_sample1">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-orient:vertical </h4>
<div class="prefix_sample2">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-orient:inline-axis </h4>
<div class="prefix_sample3">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-orient:block-axis </h4>
<div class="prefix_sample4">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>
</body>
</html>

</body>
</html>
实例图  box-orient
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | box-orient 元素内子要素配置方向 —— CSS3 参考 框布局已关闭评论
CSS 即层叠样式表(Cascading Stylesheet)。 在网页制作时采用CSS 技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。 CSS3 是CSS 技术的升级版本, CSS3 语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

CSS3 背景和边框 (Backgrounds and Borders)

背景 background-clip …… BACKGROUND-CLIP 指定背景范围 background-origin …… BACKGROUND-ORIGIN 定位背景图像 background-size …… BACKGROUND-SIZE 指定背景图像尺寸
圆角边框 border-radius …… 指定圆角边框 border-top-left-radius …… 指定左上圆角边框 border-top-right-radius …… 指定右上圆角边框 border-bottom-left-radius …… 指定左下圆角边框 border-bottom-right-radius …… 指定右下圆角边框 图片边框 border-image …… 指定图片边框 border-image-source …… 指定图片边框的图片文件 border-image-slice …… 指定图片边框范围 border-image-width …… 指定图片边框宽度 border-image-outset …… 指定图片边框图片范围宽度 border-image-repeat …… 指定图片边框图片重 DIV块表示 box-decoration-break …… DIV换行表示 box-shadow …… DIV添加阴影

CSS3 2D 3D变形

元素变形 transform …… DIV2D或3D变形 transform:matrix() …… TRANSFORM使用行列对要素进行2D变形 transform:matrix3d() …… TRANSFORM 使用行列对要素进行3D变形 transform:translate() …… TRANSFORM 要素位置移动 transform:scale() …… 要素扩大缩小 transform:rotate() …… 要素旋转 transform:skew() …… 要素倾斜变形 transform:perspective() …… 3D变形的深度 transform-origin …… 2D变形3D变形原点 transform-style …… 子要素平面化立体化指定

时间变化

transition …… TRANSITION 时间变化指定 transition-property …… TRANSITION-PROPERTY 时间变化适用于CSS元素名指定 transition-duration …… TRANSITION-DURATION 指定变化所用时间 transition-timing-function …… TRANSITION-TIMING-FUNCTION 变化的时机进展速度 transition-delay …… TRANSITION-DELAY 指定变化发生时间
Tags:
Posted in 本站原创 | CSS3 参数表 —— CSS3 资料总汇已关闭评论

radial-gradient () 说明

radial-gradient()函数, 指定元素圆型过渡时使用。<圆性渐变> radial-gradient()函数应用于background-image属性和list-style-image属性等等,他可以设置于任何指定图片的属性中。 使用方法radial-gradient(开始位置和角度,形状尺寸,开始色,途中色,完了色); 形状值 默认值为 ellipse 椭圆 circle 正圆 尺寸值 closest-side 调整到元素的最近测 closest-corner 调整到元素的最近的角 farthest-side 调整到元素的最远边 farthest-corner 调整到元素的最远的角 contain 调整到指定的范围内 cover 调整覆盖到指定的范围(默认值) ※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> radial-gradient () </title>
<style>
p.sample1, p.sample2, p.sample3, p.sample4 {
width:600px; height:100px;
}
p.sample1 {
background: radial - gradient(yellow, green);
}
p.sample2 {
background: radial - gradient(bottom left, farthest-side, red, yellow, green);
}
p.sample3 {
background: radial - gradient(top right, circle, red 50px, yellow 100px, rgba(255,255,255,0) 100px);
}
p.sample4 {
background: radial - gradient(500px 10px, circle contain, red, yellow, green);
}
</style>

</head>

<body>
<p class="sample1">圆形渐变1</p>
<p class="sample2">圆形渐变2</p>
<p class="sample3">圆形渐变3</p>
</body>
</html>
实例图  radial-gradient
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | radial-gradient 圆型过渡指定 —— CSS3 参考 过渡已关闭评论

linear-gradient () 说明

linear-gradient()函数, 指定元素线型过渡时使用。<线性渐变> linear-gradient()函数应用于background-image属性和list-style-image属性等等,他可以设置于任何指定图片的属性中。 使用方法linear-gradient(开始位置和角度,开始色,途中色,完了色); ※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> linear-gradient () </title>
<style>
p.sample1, p.sample2, p.sample3 {
width:600px; height:100px;
}
p.sample1 {
background: linear - gradient(white, gray);
}
p.sample2 {
background: linear - gradient(left, #ff0000, rgba(255,0,0,0));
}
p.sample3 {
background: linear - gradient(left 45deg, red, orange, yellow, green, blue, indigo, violet);
}
</style>

</head>

<body>
<p class="sample1">线性渐变1</p>
<p class="sample2">线性渐变2</p>
<p class="sample3">线性渐变3</p>
</body>
</html>
实例图  linear-gradient
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | linear-gradient 线型过渡指定 —— CSS3 参考 过渡已关闭评论

rgba () 说明

rgba(), RGBA模式来制定颜色时使用。 透明度 0~1的数值指定 0为完全透明,1为完全不透明。 RGBA 模式,主要是指定red, green, blue, 最后指定alpha,alpha表示颜色的透明度。 指定rgba()值得时候,使用 , 号来分隔, 颜色0-255,透明度0-1.进行设置。 ※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> rgba () </title>
<style>
p.sample1 {background-color: r g b(0,0,255);}
p.sample2 {background-color: r gba(0,0,255,1);} 
p.sample3 {background-color: r gba(0,0,255,0.5);} 
p.sample4 {background-color: r gba(0,0,255,0.1);}
p.sample5 {background-color: r gba(0,0,255,0);} 
</style>

</head>

<body>
<p class="sample1"> r g b(0,0,255)</p>
<p class="sample2"> r g b a(0,0,255,1)</p>	
<p class="sample3"> r g b a(0,0,255,0.5)</p>
<p class="sample4"> r g b a(0,0,255,0.1)</p>
<p class="sample5"> r g b a(0,0,255,0)</p>
</body>
</html>

实例图  rgba
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | rgba RGBA 颜色模式指定颜色透明度 —— CSS3 参考 透明已关闭评论

opacity 说明

opacity属性, 指定要素的透明度的时候使用。 透明度 0~1的数值指定 0为完全透明,1为完全不透明。 默认值指定动画开始时延迟时间,默认值为0,动画马上播放。 值为负数时,动画也是马上执行,但是指定的反时间瞬间运行。 如果不是整个对象的透明效果,要分别应用于边框颜色和背景颜色,可以指定RGBA()

属性值

透明度值 0~1 默认值为 1
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Opacity</title>
<style>
p.sample1 {background-color:blue;}
p.sample2 {opacity:0.7; background-color:blue;}	
p.sample3 {opacity:0.5; background-color:blue;}
p.sample4 {opacity:0.3; background-color:blue;}	
</style>

</head>

<body>
<p class="sample1">
O pacity<br>
<img src="5.jpg">
</p>	
<p class="sample2">
O pacity:0.7; <br>
<img src="5.jpg">
</p>
<p class="sample3">
O pacity:0.5; <br>
<img src="5.jpg">
</p>
<p class="sample4">
O pacity:0.3; <br>
<img src="5.jpg">
</p>	
</body>
</html>
实例图  opacity
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | opacity 要素透明度 —— CSS3 参考 透明已关闭评论

animation-delay 说明

animation-delay属性, 指定元素关键帧动画什么时候开始时使用。 animation-delay默认值指定动画开始时延迟时间,默认值为0,动画马上播放。 值为负数时,动画也是马上执行,但是指定的反时间瞬间运行。

属性值

时间 动画延迟时间指定(默认值)<可选。定义动画开始前等待的时间,以秒或毫秒计。默认值是 0。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> animation-delay </title>
<style>
div.prefix_sample {
-moz-animation-name: anime1;
-moz-animation-duration: 5s;
-moz-animation-timing-function: ease;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: -2s;

-webkit-animation-name: anime1;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: -2s;

-o-animation-name: anime1;
-o-animation-duration: 5s;
-o-animation-timing-function: ease;
-o-animation-iteration-count: infinite;
-o-animation-delay: -2s;

-ms-animation-name: anime1;
-ms-animation-duration: 5s;
-ms-animation-timing-function: ease;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: -2s;
}

@-moz-keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}

@-webkit-keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}

@-o-keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}

@-ms-keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}
</style>

</head>

<body>
<div class="prefix_sample">animation效果</div>	
</body>
</html>
实例图  animation-delay
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | animation-delay 动画开始时间指定 —— CSS3 参考 动画已关闭评论

animation-play-state 说明

animation-play-state属性, 指定元素关键帧动画暂停时使用。 <暂停动画> 默认值running,为动画播放,值为paused时动画暂停。如果想叫暂停的动画播放,将值变为running.

属性值

running 动画播放(默认值)<规定动画正在播放。> paused 动画暂停 <规定动画已暂停。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> animation-play-state </title>
<style>
div.prefix_sample {
-moz-animation-name: anime1;
-moz-animation-duration: 5s;
-moz-animation-timing-function: ease;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: paused;

-webkit-animation-name: anime1;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: paused;

-o-animation-name: anime1;
-o-animation-duration: 5s;
-o-animation-timing-function: ease;
-o-animation-iteration-count: infinite;
-o-animation-play-state: paused;

-ms-animation-name: anime1;
-ms-animation-duration: 5s;
-ms-animation-timing-function: ease;
-ms-animation-iteration-count: infinite;
-ms-animation-play-state: paused;
}

@-moz-keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}

@-webkit-keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}

@-o-keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}

@-ms-keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}
</style>

</head>

<body>
<div class="prefix_sample">animation效果</div>	
</body>
</html>
实例图  animation-play-state
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | animation-play-state 动画暂停 —— CSS3 参考 动画已关闭评论