CSS Border Animation - Latest CSS3 Hover Effects Tutorial - CSS Quick Tips and Tricks

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Border Animation đơn giản chỉ bằng CSS3 nhưng không kém phần ấn tượng.
<a id="text-effect" href="javascript:">
    <span></span>Hello word
</a>

#text-effect {
    font-size: 30px;
    color: #262626;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    padding: 0 0 6px;
    &:before,&:after,span {
        content: "";
        position: absolute;
        height: 6px;
        background-color: #262626;
    }
    span {
        display: block;
        left: 25%;
        width: 50%;
        bottom: 0;
        height: 6px;
        background-color:#fff;
        -webkit-transform: .5s;
            -ms-transform: .5s;
                transform: .5s;
    }
    &:before {
        bottom: 0;
        left: 0;
        width: 0%;
        -webkit-transition: 2s;
        -o-transition: 2s;
        transition: 2s;
    }
    &:after {
        bottom: -6px;
        left: 25%;
        width: 0%;
        -webkit-transition:.5s;
        -o-transition:.5s;
        transition:.5s;
        -webkit-transition-delay:.5s;
             -o-transition-delay:.5s;
                transition-delay:.5s; 
    }
    &:hover {
        &:before {
            width: 100%;
        }
        &:after {
            width: 50%;
        }
    }
}

0 thảo luận về CSS Border Animation - Latest CSS3 Hover Effects Tutorial - CSS Quick Tips and Tricks

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục