CSS3 @keyframes简易动漫完成

日期:2021-01-20 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

CSS3 @keyframes简易动漫完成

界定:

根据 @keyframes 标准,可以建立动漫。

建立动漫的基本原理是,将1套 CSS 款式慢慢转变为另外一套款式。

在动漫全过程中,能够数次更改这套 CSS 款式。

以百分比来要求更改产生的時间,或根据重要词 "from" 和 "to",等额的于 0% 和 100%。

0% 是动漫的刚开始時间,100% 动漫的完毕時间。

以便得到最好的访问器适用,应自始至终界定 0% 和 100% 挑选器。

关键:适配难题!@keyfrmes 兼容问题IE 9 and 和更早版本号的访问器.

英语的语法:

@keyframes animationname {keyframes-selector {css-styles;}}

animationname 必须。界定动漫的名字。 keyframes-selector

必须。动漫时长的百分比。

合理合法的值:

  • 0⑴00%
  • from(与 0% 同样)
  • to(与 100% 同样)
css-styles 必须。1个或好几个合理合法的 CSS 款式特性。

@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
//好几个特点转变,用;分隔.

@-webkit-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;}
}

应用mymove动漫方式:

挑选器

{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome, infinite表明无尽次循环系统,也可设定次数n:
                                           animation-interation-count:n*/ 
}

总结:@keyframes与animation紧密有关,如想深入把握,还需对比animation用法1起学习培训。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。