|
关键贞的动画效果如果一样,可以将关键贞的百分比用逗号隔开,然后再写效果
复制代码代码如下: @-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动画效果与基本样式最好分开写,便维护! |
|