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.

Danh mục

Effects Navigations Templates UX Patterns Plugin

Tags

#text

DEMO

Hello word

HTML

<a id="text-effect" href="javascript:">
    <span></span>Hello word
</a>

SCSS

#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%;
        }
    }
}