CSS3 简写animation CSS3,animation

关键贞的动画效果如果一样,可以将关键贞的百分比用逗号隔开,然后再写效果

关键词:

代码如下:

@-webkit-keyframes ‘buttonLight’ {

%,50%,100% { opacity:1;}

%,75%{ opacity:0;}

}

a.flash{

-webkit-animation-name: “buttonLight”; /*动画名称,需要跟@keyframes定义的名称一致*/

-webkit-animation-duration: 5s;/*动画持续的时间长*/

}

a#btn {

/*按钮的基本属性*/

background: #60cb1b;

font-size: 16px;

padding: 10px 15px;

color: #fff;

text-align: center;

text-decoration: none;

font-weight: bold;

text-shadow: 0 -1px 1px rgba(0,0,0,0.3);

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);

-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);

box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);

}

代码如下:

<a href=”” id=”btn” class=”flash”>button</a>

关键贞的动画效果如果一样,可以将关键贞的百分比用逗号隔开,然后再写效果

0%,50%,100% { opacity:1;} 表示在0,50 100 这三个点的关键贞,透明度都为125%,75%{ opacity:0;} 表示在25,75 这两个点的关键贞,透明度都为0动画效果与基本样式最好分开写,便维护!

CSS3 简写animation CSS3,animation

相关文章:

你感兴趣的文章:

标签云: