Animasi Menu CSS3

kali ini tentang menu, ya menu ini hanya menggunakan CSS tapi hasilnya mantep sob tanpa berpanjang lebar ni langusung lihat demonya yang telah saya coba..

klik gambar untuk memperbesar


Untuk pembuatan
Loggin blogger.com > Rancangan > Edithtml
Kerangka.. Terserah anda mau meletakkanya dimana

       <ul class="ca-menu">
                    <li>
                        <a href="http://cyber-jm.blogspot.com/">
                            <span class="ca-icon">J</span>
                            <div class="ca-content">
                                <h2 class="ca-main">HOME</h2>
                                <h3 class="ca-sub">Halaman Depan</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.facebook.com/Djasrieman.soekrie">
                            <span class="ca-icon">A</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Facebook</h2>
                                <h3 class="ca-sub">Profil Facebook</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="https://twitter.com/#!/jasri_DM">
                            <span class="ca-icon">S</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Twitter</h2>
                                <h3 class="ca-sub">Profil Twitter</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="https://plus.google.com/103434496702173116380">
                            <span class="ca-icon">R</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Google Plus</h2>
                                <h3 class="ca-sub">Profil Google Plus</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="ymsgr:sendIM?djasrie_01">
                            <span class="ca-icon">I</span>
                            <div class="ca-content">
                                <h2 class="ca-main">YM</h2>
                                <h3 class="ca-sub">Ngobrol dengan saya</h3>
                            </div>
                        </a>
                    </li>
                </ul>


Dan letakkan ini di atas ]]></b:skin>

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('websymbols/websymbols-regular-webfont.woff') format('woff'),
        url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
        url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.ca-menu{
    padding:0;
    margin:20px auto;
    width: 1020px;
}
.ca-menu li{
    width: 200px;
    height: 300px;
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 4px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 60px;
    color: #333;
    text-shadow: 0px 0px 1px #333;
    line-height: 150px;
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0px;
    top: 0px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-content{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 50%;
    top: 50%;
}
.ca-main{
    font-size: 30px;
    opacity: 0.8;
    text-align: center;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.ca-sub{
    text-align:center;
    font-size: 14px;
    color: #666;
    line-height: 40px;
    opacity: 0.8;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.ca-menu li:hover{
    background-color: #000;
}
.ca-menu li:hover .ca-icon{
    color: #fff;
    font-size: 90px;
}
.ca-menu li:hover .ca-main{
    color: #00ccff;
    -webkit-animation: moveFromLeftRotate 300ms ease;
    -moz-animation: moveFromLeftRotate 300ms ease;
    -ms-animation: moveFromLeftRotate 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #fff;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}
@-webkit-keyframes moveFromLeftRotate{
    from {
        -webkit-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg);
    }
}
@-moz-keyframes moveFromLeftRotate{
    from {
        -moz-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -moz-transform: translateX(0%) rotate(0deg);
    }
}
@-ms-keyframes moveFromLeftRotate{
    from {
        -ms-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -ms-transform: translateX(0%) rotate(0deg);
    }
}
@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(100%);
    }
    to {
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(100%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(100%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}

Dan sekarang anda boleh simpan
jika tidak jalan silahkan komentar.. insyaallah saya bantu


Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Yuk Tawa, Published at 15.43 and have 6 komentar

6 komentar: