Css Builder : Creative CSS3 Animation Menu 1 (HTML and CSS Tutorial)

Grab and build a beautiful navigation menu template for your website and impress your visitors.

Demo

Get CSS code here

<!-- Add this CSS Code to your style sheet

.ca-menu{
    padding: 0 0 0 48px;
    margin: 20px auto;
    width: 1020px;
}
.ca-menu li{
    width: 230px;
    height: 230px;
    border: 10px solid #f6f6f6;
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    margin-left:-48px;
    -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);
    -webkit-border-radius: 125px;
    -moz-border-radius: 125px;
    border-radius: 125px;
    -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-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: 40px;
    color: #f6f6f6;;
    line-height: 60px;
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 30px;
    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-main{
    font-size: 24px;
    position: absolute;
    top: 110px;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    opacity: 0.8;
    text-align: center;
    color: #555;
}

.ca-menu li:hover{
    border-color: #333;
    z-index: 999;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.ca-menu li:hover .ca-icon{
    color: #000;
    font-size: 60px;
    text-shadow: 0px 0px 1px #000;
    -webkit-animation: moveFromBottom 300ms ease;
    -moz-animation: moveFromBottom 300ms ease;
    -ms-animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
    color: #000;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -moz-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -ms-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}

-->

Get html code here

<!-- Add this HTML Code

<html lang="en">
    <head>
      
       
        <link rel="stylesheet" type="text/css" href="css/style10.css" />
        <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
    </head>
    <body>
        
            
           
         
              
                <ul class="ca-menu">
<li>
                        <a href="#">
                            <span class="ca-icon">icon</span>
                            <div class="ca-content">
                                <h2 class="ca-main">
Home</h2>
</div>
</a>
                    </li>
<li>
                        <a href="#">
                            <span class="ca-icon">icon</span>
                            <div class="ca-content">
                                <h2 class="ca-main">
About</h2>
</div>
</a>
                    </li>
<li>
                        <a href="#">
                            <span class="ca-icon" id="heart">icon</span>
                            <div class="ca-content">
                                <h2 class="ca-main">
Service</h2>
</div>
</a>
                    </li>
<li>
                        <a href="#">
                            <span class="ca-icon">icon</span>
                            <div class="ca-content">
                                <h2 class="ca-main">
Project</h2>
</div>
</a>
                    </li>
<li>
                        <a href="#">
                            <span class="ca-icon">icon</span>
                            <div class="ca-content">
                                <h2 class="ca-main">
Contact</h2>
</div>
</a>
                    </li>
</ul>
</body>
</html>

-->

3 comments:

UnknownAugust 19, 2017 at 6:01 AM
CSS3 Flip Animation have two steps. Place the CSS code in CSS File and then HTML code. I would like to appreciate your post because you have shared the ideas, assignment help, methods, techniques, knowledge as well experience with the readers.
Dylan EalesFebruary 2, 2019 at 5:04 AM
Thanks for this informative content. It’s really good. Actually, I want to share some thoughts and reviews about an assignment help Australia company and the brand name is SAMPLE ASSIGNMENT. Here, I am working as an Academic Expert. To look at our online academic assistants who provide reference assignment including Accounting, Management, Finance, IT, Economics, Computer Science, Nursing, Marketing; all Academic subjects to University Students all over the Australia or even worldwide, Here is a big online assignment help providers who help students to get HD grades according to assessment guidelines and instructions. Those who are searching for assignment help Melbourne, Perth, Brisbane, Adelaide etc. get a touch with Sample Assignment - the No.1 Assignment provider. Any student really wants to buy an assignment at the cheapest price goes to our branded website and has a look and opts our amazing and informative services, you can avail of our convenient online assignment help and samples available on our website for free. You can download it if you want. Are you ready to get 100 out of 100 in your university assessment? We assign the best writer according to the subject for your academic problems and provide support in assignment writing services. Our Customer Care Executives are available 24*7 hours to assist you in the best possible manner. Phone calls and emails are the best methods used by online assignment maker.
NehaOctober 31, 2019 at 8:06 AM
Extraordinary post. I was checking always this post and I am intrigued! Extremely accommodating information. spss help

Navigation

Creative CSS3 Animation Menu 1 (HTML and CSS Tutorial)

Grab and build a beautiful navigation menu template for your website and impress your visitors.

Demo

Get CSS code here

Get html code here

3 comments: