CSS Custom Menu Border Animation On Hover - CSS Reverse Direction Hover Effects - Tutorial

Hôm nay mình sẽ giới thiệu cho các bạn tạo một hiệu ứng Menu Border Animation đơn giản, thường ứng ụng trong các trang landing page.
<ul id="nav-demo">
    <li><a href="">Trang chủ</a></li>
    <li><a href="">Giới thiệu</a></li>
    <li><a href="">Dịch vụ</a></li>
    <li><a href="">Dự án</a></li>
    <li><a href="">Liên hệ</a></li>
</ul>

#nav-demo {
    padding: 0;
    margin: 0;
    &amp;:after,
    &amp;:before {
        content: " ";
        display: table;
    }
    &amp;:after {
        clear: both;
    }
    li {
        float: left;
        list-style: none;
        a {
            position: relative;
            display: block;
            padding: 10px 15px;
            text-align: center;
            color: #262626;
            text-transform: uppercase;
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
            &amp;:after,&amp;:before {
                content: "";
                position: absolute;
                width: 100%;
                height: 2px;
                background: #262626;
                overflow: hidden;
                z-index: 1;
                -webkit-transform: scaleX(0);
                    -ms-transform: scaleX(0);
                        transform: scaleX(0);
                -webkit-transition: -webkit-transform .5s;
                transition: -webkit-transform .5s;
                -o-transition: transform .5s;
                transition: transform .5s;
                transition: transform .5s, -webkit-transform .5s;
            }
            &amp;:before {
                top:0;
                left: 0;
                -webkit-transform-origin: right;
                    -ms-transform-origin: right;
                        transform-origin: right;
            }
            &amp;:after {
                bottom: 0;
                right: 0;
                -webkit-transform-origin: left;
                    -ms-transform-origin: left;
                        transform-origin: left;
            }
        }
        &amp;:hover {
            a {
                &amp;:before {
                    -webkit-transform: scaleX(1);
                        -ms-transform: scaleX(1);
                            transform: scaleX(1);
                    -webkit-transform-origin: left;
                        -ms-transform-origin: left;
                            transform-origin: left;
                }
                &amp;:after {
                    -webkit-transform: scaleX(1);
                        -ms-transform: scaleX(1);
                            transform: scaleX(1);
                    -webkit-transform-origin: right;
                        -ms-transform-origin: right;
                            transform-origin: right;
                }
            }
        }
    }
}
@media screen and (max-width: 450px) {
    #nav-demo {
        li {
            margin-top: 10px;
            float: none;
            &amp;:first-child {
                margin-top: 0;
            }
        }
    }
}

0 thảo luận về CSS Custom Menu Border Animation On Hover - CSS Reverse Direction Hover Effects - Tutorial

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