Trang chủ   Kiến thức lập trình   CSS   Hiệu ứng ấn tượng với CSS3 border transition effects

Hiệu ứng ấn tượng với CSS3 border transition effects

  CSS  03-3-2015
 Xem demo  Download demo

Hôm nay , mình sẽ chia sẻ cho các bạn một vài hiệu ứng tuyệt đẹp với  Border Transitions. Qua bài viết này, các bạn có thể học hỏi thêm một vài kinh nghiệm trong việc sử dụng những thuộc tính căn bản của CSS3 và hơn hết là có thể áp dụng những hiệu ứng này vào trong các trang web hay blog của các bạn.

CSS3 border, transition effects, css3 effects, css3 transition

HTML

Đầu tiên, chúng ta sẽ cần những phần tử html như sau :

<a href="#" class="one"></a>

<a href="#" class="two"></a>

<a href="#" class="three"></a>

<br />

<a href="#" class="yon"></a>

<a href="#" class="goo"></a>

<a href="#" class="rok"></a>

<a href="#" class="ryk"></a>

<br />

<a href="#" class="x7"></a>

<a href="#" class="x8"></a>

<a href="#" class="x9"></a>

CSS

Và đây là những đoạn css sẽ giúp các bạn tạo nên những hiệu ứng cực kỳ ấn tượng, nhớ xem xét tỉ mỉ từng đoạn css để hiểu rõ hơn về cách tạo những hiệu ứng.

body {

    padding: 100px 20px;

}



a {

    background-image: url(data:image/gif;base64,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);

    background-position: 50% 50%;

    background-repeat: no-repeat;

    background-origin: border-box;



    display: inline-block; width: 100px; height: 100px;

    border-width: 50px;

    border-color: rgba(0,0,0,0);



    border-radius: 100%;

    -moz-border-radius: 100%;

    -webkit-border-radius: 100%;



    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;



    -webkit-transition: 0.5s ease;

    -moz-transition: 0.5s ease;

    -ms-transition: 0.5s ease;

    -o-transition: 0.5s ease;

    transition: 0.5s ease;

}



a:hover {

    border-width: 0;

    border-color: rgba(0, 0, 0, 0.5);

}



.one{border-style: solid;}

.two{border-style: dashed;}

.three{border-style: dotted;}



.yon {border: 50px solid rgba(0, 0, 0, 0.7);}

.goo {border: 50px dashed rgba(0, 0, 0, 0.7);}

.rok {border: 50px dotted rgba(0, 0, 0, 0.7);}

.ryk {border: 50px double rgba(0, 0, 0, 0.7);}

.yon:hover{border: 1px solid rgba(0, 0, 0, 0.7);}

.goo:hover{border: 1px dashed rgba(0, 0, 0, 0.7);}

.rok:hover{border: 1px dotted rgba(0, 0, 0, 0.7);}

.ryk:hover{border: 1px double rgba(0, 0, 0, 0.7);}



.x7, .x8, .x9 {

    border-radius: 0;

    -moz-border-radius: 0;

    -webkit-border-radius: 0;

}

.x7 {border: 50px solid rgba(0, 0, 0, 0.7);}

.x8 {border: 50px dashed rgba(0, 0, 0, 0.7);}

.x9 {border: 50px dotted rgba(0, 0, 0, 0.7);}

.x7:hover {border: 1px solid rgba(0, 0, 0, 0.7);}

.x8:hover {border: 1px dashed rgba(0, 0, 0, 0.7);}

.x9:hover {border: 1px dotted rgba(0, 0, 0, 0.7);}

Xem qua đoạn code bên trên, các bạn sẽ thấy việc tạo hiệu ứng cũng không phải là quá khó. Điều quan trọng là hiểu rõ về chúng, là các bạn sẽ có thể tự sáng tạo ra những hiệu ứng đẹp khác cho mình. Mình hy vọng các bạn có thể nắm vững và hiểu rõ hơn về cách sử dụng những thuộc tính CSS3 qua bài viết này.

 


 HỖ TRỢ TRỰC TUYẾN