Tạo thanh đo lường đẹp mắt với CSS3 Animation

Chào các bạn, hôm nay mình sẽ tiếp tục chia sẻ cho các bạn thêm một hiệu ứng được làm từ CSS3 Animation nữa. Với hiệu ứng này, các bạn có thể áp dụng cho các thiết kế trang giới thiệu ,hoặc những trang porfolio đầy ấn tượng cho cá nhân của mình. Ngoài ra nếu muốn , các bạn cũng có thể áp dụng cho những phần hiển thị kết quả từ trang bình chọn của người dùng.

Xem Demo | Download

HTML

Đầu tiên , chúng ta sẽ cần một đoạn html mô phỏng cho các thanh đo lường như sau :

<div class="content">
<div class="col">
  <h2>My Skill</h2>
    <ul id="skill">
    <li><span class="expand html5"></span><em>HTML 5</em></li>
    <li><span class="expand css3"></span><em>CSS 3</em></li>
    <li><span class="expand jquery"></span><em>jQuery</em></li>
    <li><span class="expand photoshop"></span><em>Photoshop</em></li>
    <li><span class="expand dreamweaver"></span><em>Dreamweaver</em></li>
    </ul>
</div>
</div>

CSS

Bây giờ là phần quan trọng nhất, đầu tiên chúng ta sẽ định dạng CSS cơ bản cho phần thanh trạng thái

.content {
    awidth: 278px;
    margin: 0;
    position: relative;
    float: left;
    font-size: 12px;
    line-height: 2em;
    padding: 30px 0 30px;
}

.col {
    awidth: 280px;
}

#skill {
    list-style: none;
    padding-top: 30px;
}

#skill li {
    margin-bottom: 70px;
    background: #000;
    height: 5px;
    border-radius: 3px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

#skill li em {
    position: relative;
    top: -30px;
}

.expand {
    height: 1px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.4);
}

Kế tiếp là khai báo  hiệu ứng động cho từng phần :

.html5 {
    awidth: 70%;
    -moz-animation: html5 2s ease-out;
    -webkit-animation: html5 2s ease-out;
}

.css3 {
    awidth: 90%;
    -moz-animation: css3 2s ease-out;
    -webkit-animation: css3 2s ease-out;
}

.jquery {
    awidth: 50%;
    -moz-animation: jquery 2s ease-out;
    -webkit-animation: jquery 2s ease-out;
}

.photoshop {
    awidth: 10%;
    -moz-animation: photoshop 2s ease-out;
    -webkit-animation: photoshop 2s ease-out;
}

.dreamweaver {
    awidth: 100%;
    -moz-animation: dreamweaver 2s ease-out;
    -webkit-animation: dreamweaver 2s ease-out;
}

Cuối cùng là chúng ta sẽ định nghĩa cho phần hiệu ứng sẽ chạy cho từng phần :

@-moz-keyframes html5 {
    0% {
        awidth: 0px;
    }

    100% {
        awidth: 70%;
    };
}

@-moz-keyframes css3 {
    0% {
        awidth: 0px;
    }

    100% {
        awidth: 90%;
    };
}

@-moz-keyframes jquery {
    0% {
        awidth: 0px;
    }

    100% {
        awidth: 50%;
    };
}

@-moz-keyframes photoshop {
    0% {
        awidth: 0px;
    }

    100% {
        awidth: 10%;
    };
}

@-moz-keyframes dreamweaver {
    0% {
        awidth: 0px;
    }

    100% {
        awidth: 100%;
    };
}

@-webkit-keyframes html5 {
    0% {
        awidth: 0px;
    }

    100% {
        awidth: 70%;
    };
}

@-webkit-keyframes css3 {
    0% {
        awidth: 0px;
    }

    100% {
        awidth: 90%;
    };
}

@-webkit-keyframes jquery {
    0% {
        awidth: 0px;
    }

    100% {
        awidth: 50%;
    };
}

@-webkit-keyframes photoshop {
    0% {
        awidth: 0px;
    }

    100% {
        awidth: 10%;
    };
}

@-webkit-keyframes dreamweaver {
    0% {
        awidth: 0px;
    }

    100% {
        awidth: 100%;
    };
}

Thế là xong rồi đó các bạn, để kiểm tra kết quả, các bạn nên dùng các trình duyệt như Firefox, Chrome hoặc Safari ở những phiên bản mới nhất nhá. Mình hy vọng, qua bài viết này, các bạn sẽ có thêm một hiệu ứng đẹp cho việc thiết kế web cũng như có thêm kinh nghiệm trong việc sử dụng CSS3 Animation.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster