Welcome, Old Sport!

keyframes制作CSS技能栏

by ilikecss ON 2014/03/20 3942

keyframes制作CSS技能栏‘keyframes’关键帧,类似于以前做Flash的逐帧动画,但比Flash制作简单多了。以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%,0% 是动画的开始时间,100% 动画的结束时间。当然这只是控制你动画的进程,动画效果指定还是需要靠CSS3的animation来完成,下面一起来看个案例。

Step1. HTML代码

<div id="skillset">

    <div class="skill">
        <h3>HTML5/CSS3 <sup>(100%)</sup></h3>
        <span class="bar"><span class="skillbar htmlcss alt"></span></span>
    </div>

    <div class="skill">
        <h3>PHP/MySQL <sup>(50%)</sup></h3>
        <span class="bar"><span class="skillbar phpmysql alt"></span></span>
    </div>

    <div class="skill">
        <h3>jQuery <sup>(70%)</sup></h3>
        <span class="bar"><span class="skillbar jquery alt"></span></span>
    </div>

    <div class="skill">
        <h3>WordPress <sup>(70%)</sup></h3>
        <span class="bar"><span class="skillbar wordpress alt"></span></span>
    </div>

    <div class="skill">
        <h3>Photoshop <sup>(90%)</sup></h3>
        <span class="bar"><span class="skillbar photoshop alt"></span></span>
    </div>
</div>

目前浏览器都不支持 @keyframes规则, 青使用各浏览器@-?-keyframes来标注!

1条评论
  1. #1

    ilikecss说道:

    自沙! :wink:




TOP