Transforming Menu Icon With Labels - Animated Transforming Toggle Menu Effect Tutorials

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Transforming Menu Icon With Labels đơn giản bằng CSS3 vô cùng ấn tượng.

Close

<div id="btn-menu" class="">
    <span class=""></span>
    <span class=""></span>
    <span class=""></span>
    <p class="menu">Menu</p>
    <p class="close">Close</p>
</div>

#btn-menu {
    position: relative;
    cursor: pointer;
    span {
        width: 32px;
        height: 4px;
        background-color: #e24d26;
        display: block;
        margin-bottom: 6px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        transition: .5s;
    }

    p {
        display: block;
        position: absolute;
        width: 100%;
        text-transform: uppercase;
        text-align: center;
        font-size: 8px;
        font-weight: bold;
        color: #fff;
        background-color: #e24d26;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        backface-visibility: hidden;
        transition: .5s;
        &.menu {
            transform: rotateY(0deg);
            opacity: 1;
        }
        &.close {
            transform: rotateY(180deg);
            opacity: 0;
        }
    }
    &.open {
        p {
            &.menu {
                transform: rotateY(180deg);
                opacity: 0;
            }
            &.close {
                transform: rotateY(0deg); 
                background-color: #fff;
                color: #e24d26;
                opacity: 1;
            }
        }
        span {
            &:nth-child(2) {
                transform: translateX(-50px);
                opacity: 0;
            }
            &:nth-child(1) {
                transform: rotateY(180deg) rotateZ(45deg) translate(7px,7px);
            }
            &:nth-child(3) {
                transform: rotateY(180deg) rotateZ(-45deg) translate(7px,-7px);
            }
        }
    }
}

jQuery(document).ready(function($) {
    $("#btn-menu").click(function(event) {
        $(this).toggleClass('open');
    });
});

0 thảo luận về Transforming Menu Icon With Labels - Animated Transforming Toggle Menu Effect Tutorials

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