CSS3 中的@keyframes详细介绍

日期:2021-03-06 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

英语的语法

@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必须。界定动漫的名字。
keyframes-selector
必须。动漫时长的百分比。
合理合法的值:
0⑴00%
from(与 0% 同样)
to(与 100% 同样)
css-styles 必须。1个或好几个合理合法的 CSS 款式特性。

界定和用法
根据 @keyframes 标准,您可以建立动漫。
建立动漫的基本原理是,将1套 CSS 款式慢慢转变为另外一套款式。
在动漫全过程中,您可以数次更改这套 CSS 款式。
以百分比来要求更改产生的時间,或根据重要词 "from" 和 "to",等额的于 0% 和 100%。
0% 是动漫的刚开始時间,100% 动漫的完毕時间。
以便得到最好的访问器适用,您应当自始至终界定 0% 和 100% 挑选器。
注解:请应用动漫特性来操纵动漫的外型,另外将动漫与挑选器关联。

现阶段访问器都不适用 @keyframes 标准。
Firefox 适用取代的 @-moz-keyframes 标准。
Opera 适用取代的 @-o-keyframes 标准。
Safari 和 Chrome 适用取代的 @-webkit-keyframes 标准。

例:


拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}</p> <p>@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}</p> <p>@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}</p> <p>@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}</p> <p>@-o-keyframes mymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body></p> <p><p><b>注解:</b>本例在 Internet Explorer 中失效。</p></p> <p><div></div></p> <p></body>
</html>

上一篇:根据Oracle绝大多数据开发设计 返回下一篇:没有了