Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • An Animated Bouncing Smiley Using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 918
    Comment on it

    Hello , readers In today's blog I have tried to create An Animated Bouncing Smiley using CSS3 properties.

    As looking over the smiley , firstly I have to collect all the elements that can help me in creating the smiley. The elements which can be include are eyes , the eyebrows , the center eye ball , the pupil , mouth and the tongue.

    Now for creating a smiley I need to create a div with a class name as “smiley” with a number of nested divs comprising of various elements.

    I have also added some animation effect to the smiley such as blinking of eyes , movement of pupil , movement in tongue and bouncing movement of the smiley.

    Below is the html code for creating the smiley :-

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Animated Smiley Face</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    </head>
    
    <body>
    
    <section class="container">
    
    <div class="smiley"> <!-- Smiley -->
    
    <div id="shine"> <!-- Shine -->
    
    <div class="brow"></div> <!-- Eyebrow 1 -->
    
    <div class="brow1"></div> <!-- Eyebrow 2 -->
    
    <div class="eye"> <!-- Eye 1 -->
    
    <div class="ball1"> <!-- Black part -->
    
    <div class="pupil1"></div> <!-- Pupil -->
    
    </div>
    
    </div>
    
    <div class="eye1"> <!-- Eye 2 -->
    
    <div class="ball2"> <!-- Black part -->
    
    <div class="pupil2"> <!-- Pupil -->
    
    </div>
    
    </div>
    
    </div>
    
    <div class="mouth"></div> <!-- Mouth -->
    
    <div class="tongue"></div> <!-- Tongue -->
    
    </div>
    
    </div>
    
    </section>
    
    </body>
    
    </html>

    Now comes the styling part of the smiley , To the smiley I have given the border-radius as 100% , adjusted the height and width , set the background-color, created box-shadow around the smiley , make position set to relative and the background-clip as padding-box .

     

    To the smiley I  also need to apply animation over it with name as bounce , with a duration for 1s , iteration-count to 100 and adjusted its direction to alternate . I have also used @keyframe property for bouncing the smiley.

     

    I have also tried to give shine over the smiley by using linear-gradient as background-image and adjusted the height and width .

     

    Next , now for creating the two eyes I need to set the border-radius , height, width , position , background-color and the border-bottom.

     

    I have also added animation effect to the eyes with the name as eye, with a duration for 4s ,iteration-count to infinite at different browsers.

     

    Now moving to the inner black part to create the two balls , I need to set the position to relative , adjusted its height, width , box-shadow and the border-radius.

     

    Now for creating the pupils , I need to set the position to relative , adjusted the height and the width , provide a background-color and the border-radius .

     

    I have  also applied animation to the eye movement by setting its duration time as 4s and iteration-count to infinite .

     

    Now for creating the eyebrows , I have used transform rotate property  and set the border-bottom-right and left radius with the border-bottom . I also made its position to absolute.

     

    Now for creating the mouth , I need to set the border-bottom- right and left radius , used transform rotate property and made background to transparent. I have set its position to absolute and applied the appropriate height and width.

     

    Now last for creating the tongue , I made its position to absolute , adjusted its height and width , applied the border-bottom-right and left and the background-color .

     

    I have also applied animation effect to the tongue with a duration of 1s, iteration-count to infinite and direction to alternate at various browsers.

     

    I have also used @keyframe property to the tongue for animating its height when moved inward and outward , to the eye I have used transform scale property at various percentages. For the eye movement I have used transform translate property to the X and Y axis at 0 , 25 and 100%.

     

    Below is the CSS code :-

    html {
    
    background: #000; /* Background Color */
    
    overflow:hidden;
    
    }
    
    body
    
    {
    
    text-align:center;
    
    }
    
    /* Container */
    
    .container{
    
    width:820px;
    
    margin:30px auto;
    
    padding:25px;
    
    min-height:400px;
    
    height:auto;
    
    }
    
    .smiley { /* Smiley */
    
    position:relative;
    
    display:inline-block;
    
    top:5px;
    
    width: 285px;
    
    height: 285px;
    
    -moz-border-radius: 100%;
    
    -o-border-radius: 100%;
    
    -webkit-border-radius: 100%;
    
    -ms-border-radius: 100%;
    
    border-radius: 100%;
    
    -moz-background-clip: padding;
    
    -webkit-background-clip: padding-box;
    
    -ms-background-clip: padding-box;
    
    -o-background-clip: padding-box;
    
    background-clip: padding-box;
    
    background-color: #3ab983; /* Color */
    
    -moz-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -17px -22px 79px rgba(0,0,0,.63);
    
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -17px -22px 79px rgba(0,0,0,.63);
    
    -o-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -17px -22px 79px rgba(0,0,0,.63);
    
    -ms-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -17px -22px 79px rgba(0,0,0,.63);
    
    box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -17px -22px 79px rgba(0,0,0,.63);
    
    border: 2px solid #000;
    
    cursor: pointer;
    
    /* Animation */
    
    -webkit-animation-name:bounce;
    
    -webkit-animation-duration:1s;
    
    -webkit-animation-iteration-count:100;
    
    -webkit-animation-direction:alternate;
    
    -o-animation-name:bounce;
    
    -o-animation-duration:1s;
    
    -o-animation-iteration-count:100;
    
    -o-animation-direction:alternate;
    
    -ms-animation-name:bounce;
    
    -ms-animation-duration:1s;
    
    -ms-animation-iteration-count:100;
    
    -ms-animation-direction:alternate;
    
    -moz-animation-name:bounce;
    
    -moz-animation-duration:1s;
    
    -moz-animation-iteration-count:100;
    
    -moz-animation-direction:alternate;
    
    animation-name:bounce;
    
    animation-duration:1s;
    
    animation-iteration-count:100;
    
    animation-direction:alternate;
    
    }
    
    @-webkit-keyframes bounce{from{}
    
    to{top:200px;}
    
    }
    
    @-ms-keyframes bounce{from{}
    
    to{top:320px;}
    
    }
    
    @-o-keyframes bounce{from{}
    
    to{top:320px;}
    
    }
    
    @-moz-keyframes bounce{from{}
    
    to{top:320px;}
    
    }
    
    @keyframes bounce{from{}
    
    to{top:320px;}
    
    }
    
    #shine {
    
    width:260px;
    
    height:260px;
    
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 50%);
    
    background-image: -moz-linear-gradient(rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 50%);
    
    background-image: -o-linear-gradient(rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 50%);
    
    background-image: -ms-linear-gradient(rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 50%);
    
    background-image:linear-gradient(rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 50%);
    
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#0ffffff)";
    
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#0ffffff);
    
    border-radius:100%;
    
    margin-left:13px;
    
    margin-top:3px;
    
    float:left;
    
    display:inline-block;
    
    }
    
    .eye {
    
    position:relative;
    
    top:70px;
    
    left:40px;
    
    width: 66px;
    
    height: 66px;
    
    -moz-border-radius: 33px;
    
    -webkit-border-radius: 33px;
    
    border-radius: 33px;
    
    -o-border-radius: 33px;
    
    -ms-border-radius: 33px;
    
    -moz-background-clip: padding;
    
    -webkit-background-clip: padding-box;
    
    -o-background-clip: padding;
    
    -ms-background-clip: padding;
    
    background-clip: padding-box;
    
    background-color: #fff;
    
    -moz-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    -o-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    -ms-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    border-bottom: solid 1px #000;
    
    
    /* animation */
    
    -webkit-animation: eye 4s infinite step-start 0s;
    
    -moz-animation: eye 4s infinite step-start 0s;
    
    -o-animation: eye 4s infinite step-start 0s;
    
    -ms-animation: eye 4s infinite step-start 0s;
    
    animation: eye 4s infinite step-start 0s;
    
    }
    
    .eye1 {
    
    position:absolute;
    
    top:50px;
    
    left:140px;
    
    width: 86px;
    
    height: 86px;
    
    -moz-border-radius: 43px;
    
    -webkit-border-radius: 43px;
    
    border-radius: 43px;
    
    -moz-border-radius: 43px;
    
    -o-border-radius: 43px;
    
    -ms-background-clip: padding;
    
    -webkit-background-clip: padding-box;
    
    background-clip: padding-box;
    
    background-color: #fff;
    
    -moz-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    -ms-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    -o-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    
    /* animation */
    
    -webkit-animation: eye 4s infinite step-start 0s;
    
    -moz-animation: eye 4s infinite step-start 0s;
    
    -o-animation: eye 4s infinite step-start 0s;
    
    -ms-animation: eye 4s infinite step-start 0s;
    
    animation: eye 4s infinite step-start 0s;
    
    }
    
    .ball1 { /* Black Part */
    
    position:relative;
    
    width: 46px;
    
    height: 46px;
    
    top:10px;
    
    display:inline-block;
    
    -moz-border-radius: 100%;
    
    -webkit-border-radius: 100%;
    
    -o-border-radius: 100%;
    
    -ms-border-radius: 100%;
    
    border-radius: 100%;
    
    -moz-background-clip: padding;
    
    -webkit-background-clip: padding-box;
    
    background-clip: padding-box;
    
    background-color: #000;
    
    -moz-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    -o-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    }
    
    .ball2 {
    
    position:relative;
    
    width: 66px;
    
    height: 66px;
    
    top:10px;
    
    display:inline-block;
    
    -moz-border-radius: 100%;
    
    -o-border-radius: 100%;
    
    -webkit-border-radius: 100%;
    
    border-radius: 100%;
    
    -moz-background-clip: padding;
    
    -webkit-background-clip: padding-box;
    
    background-clip: padding-box;
    
    background-color: #000;
    
    -moz-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    -o-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    box-shadow: 0 2px 8px rgba(0,0,0,.47), inset -9px -12px 35px rgba(0,0,0,.28);
    
    }
    
    
    
    .pupil1 {
    
    position:relative;
    
    width: 16px;
    
    height: 16px;
    
    top:10px;
    
    left:10px;
    
    display:inline-block;
    
    -moz-border-radius: 100%;
    
    -webkit-border-radius: 100%;
    
    border-radius: 100%;
    
    -o-border-radius: 100%;
    
    -moz-background-clip: padding;
    
    -webkit-background-clip: padding-box;
    
    background-clip: padding-box;
    
    background-color: #fff;
    
    
    /* animation */
    
    -webkit-animation: eye 4s infinite step-start 0s;
    
    -moz-animation: eye 4s infinite step-start 0s;
    
    -o-animation: eye 4s infinite step-start 0s;
    
    -ms-animation: eye 4s infinite step-start 0s;
    
    animation: eye 4s infinite step-start 0s;
    
    -webkit-animation: emove 4s infinite step-start 0s;
    
    -moz-animation: emove 4s infinite step-start 0s;
    
    -o-animation: emove 4s infinite step-start 0s;
    
    -ms-animation: emove 4s infinite step-start 0s;
    
    animation: emove 4s infinite step-start 0s;
    
    }
    
    .pupil2 {
    
    position:relative;
    
    width: 20px;
    
    height: 20px;
    
    top:20px;
    
    left:-10px;
    
    display:inline-block;
    
    -moz-border-radius: 100%;
    
    -o-border-radius: 100%;
    
    -webkit-border-radius: 100%;
    
    border-radius: 100%;
    
    -moz-background-clip: padding;
    
    -webkit-background-clip: padding-box;
    
    background-clip: padding-box;
    
    background-color: #fff;
    
    
    /* animation */
    
    -webkit-animation: eye 4s infinite step-start 0s;
    
    -moz-animation: eye 4s infinite step-start 0s;
    
    -o-animation: eye 4s infinite step-start 0s;
    
    -ms-animation: eye 4s infinite step-start 0s;
    
    animation: eye 4s infinite step-start 0s;
    
    -webkit-animation: emove 4s infinite step-start 0s;
    
    -moz-animation: emove 4s infinite step-start 0s;
    
    -o-animation: emove 4s infinite step-start 0s;
    
    -ms-animation: emove 4s infinite step-start 0s;
    
    animation: emove 4s infinite step-start 0s;
    
    }
    
    .brow /* eyebrow */
    
    {
    
    display: inline-block;
    
    position:absolute;
    
    right:50px;
    
    top: 25px;
    
    height: 90px;
    
    width: 90px;
    
    background: transparent;
    
    border-bottom-left-radius: 90px;
    
    border-bottom-right-radius: 90px;
    
    border-bottom: solid 6px #000;
    
    -webkit-transform: rotate(165deg);
    
    -moz-transform: rotate(165deg);
    
    -ms-transform: rotate(165deg);
    
    -o-transform: rotate(165deg);
    
    transform: rotate(165deg);
    
    }
    
    .brow1
    
    {
    
    display: inline-block;
    
    position:absolute;
    
    left:40px;
    
    top: 50px;
    
    height: 60px;
    
    width: 60px;
    
    background: transparent;
    
    border-bottom-left-radius: 60px;
    
    border-bottom-right-radius: 60px;
    
    border-bottom: solid 4px #000;
    
    -webkit-transform: rotate(-165deg);
    
    -moz-transform: rotate(-165deg);
    
    -ms-transform: rotate(-165deg);
    
    -o-transform: rotate(-165deg);
    
    transform: rotate(-165deg);
    
    }
    
    .mouth{
    
    position:absolute;
    
    top:130px;
    
    z-index:3;
    
    left:0;
    
    right:0;
    
    height: 85px;
    
    width: 150px;
    
    margin:0 auto;
    
    background: transparent;
    
    border-bottom-left-radius: 85px;
    
    border-bottom-right-radius: 85px;
    
    border-bottom: solid 8px #000;
    
    -webkit-transform: rotate(-10deg);
    
    -moz-transform: rotate(-10deg);
    
    -ms-transform: rotate(-10deg);
    
    -o-transform: rotate(-10deg);
    
    transform: rotate(-10deg);
    
    }
    
    .tongue{
    
    position:absolute;
    
    top:216px;
    
    left:20px;
    
    z-index:2;
    
    right:0;
    
    height: 0;
    
    width: 40px;
    
    margin:0 auto;
    
    background: #e43; /* tongue color */
    
    border-bottom-left-radius: 25px;
    
    border-bottom-right-radius: 25px;
    
    -webkit-transform: rotate(-10deg);
    
    -moz-transform: rotate(-10deg);
    
    -ms-transform: rotate(-10deg);
    
    -o-transform: rotate(-10deg);
    
    transform: rotate(-10deg);
    
    border-bottom: solid 1px #000;
    
    /* animation */
    
    -webkit-animation-name:tongue;
    
    -webkit-animation-duration:1s;
    
    -webkit-animation-iteration-count:infinite;
    
    -webkit-animation-direction:alternate;
    
    -moz-animation-name:tongue;
    
    -moz-animation-duration:1s;
    
    -moz-animation-iteration-count:infinite;
    
    -moz-animation-direction:alternate;
    
    -o-animation-name:tongue;
    
    -o-animation-duration:1s;
    
    -o-animation-iteration-count:infinite;
    
    -o-animation-direction:alternate;
    
    -ms-animation-name:tongue;
    
    -ms-animation-duration:1s;
    
    -ms-animation-iteration-count:infinite;
    
    -ms-animation-direction:alternate;
    
    animation-name:tongue;
    
    animation-duration:1s;
    
    animation-iteration-count:infinite;
    
    animation-direction:alternate;
    
    }
    
    @-webkit-keyframes tongue{
    
    from{}
    
    to{
    
    height: 40px;}
    
    }
    
    @-o-keyframes tongue{
    
    from{}
    
    to{
    
    height: 40px;}
    
    }
    
    @-moz-keyframes tongue{
    
    from{}
    
    to{
    
    height: 40px;}
    
    }
    
    @-ms-keyframes tongue{
    
    from{}
    
    to{
    
    height: 40px;}
    
    }
    
    @keyframes tongue{
    
    from{}
    
    to{
    
    height: 40px;}
    
    }
    
    @-webkit-keyframes eye{
    
    0% {-webkit-transform: scale(1,1);}
    
    2% {-webkit-transform: scale(1,0);}
    
    4% {-webkit-transform: scale(1,0);}
    
    5% {-webkit-transform: scale(1,1);}
    
    100% {-webkit-transform: scale(1,1);}
    
    }
    
    @-o-keyframes eye{
    
    0% {-o-transform: scale(1,1);}
    
    2% {-o-transform: scale(1,0);}
    
    4% {-o-transform: scale(1,0);}
    
    5% {-o-transform: scale(1,1);}
    
    100% {-o-transform: scale(1,1);}
    
    }
    
    }
    
    @-ms-keyframes eye{
    
    0% {-ms-transform: scale(1,1);}
    
    2% {-ms-transform: scale(1,0);}
    
    4% {-ms-transform: scale(1,0);}
    
    5% {-ms-transform: scale(1,1);}
    
    100% {-ms-transform: scale(1,1);}
    
    }
    
    @-moz-keyframes eye{
    
    0% {-moz-transform: scale(1,1);}
    
    2% {-moz-transform: scale(1,0);}
    
    4% {-moz-transform: scale(1,0);}
    
    5% {-moz-transform: scale(1,1);}
    
    100% {-moz-transform: scale(1,1);}
    
    }
    
    @keyframes eye{
    
    0% {transform: scale(1,1);}
    
    2% {transform: scale(1,0);}
    
    4% {transform: scale(1,0);}
    
    5% {transform: scale(1,1);}
    
    100% {transform: scale(1,1);}
    
    }
    
    @-webkit-keyframes emove{
    
    0% {-webkit-transform :}
    
    25% {-webkit-transform :translateY(60%);translateX(20%);}
    
    100% {-webkit-transform :translateX(-30%);}
    
    }
    @-ms-keyframes emove{
    
    0% {-ms-transform :}
    
    25% {-ms-transform :translateY(60%);translateX(20%);}
    
    100% {-ms-transform :translateX(-30%);}
    
    }
    
    @-moz-keyframes emove{
    
    0% {-moz-transform :}
    
    25% {-moz-transform :translateY(60%);translateX(20%);}
    
    100% {-moz-transform :translateX(-30%);}
    
    }
    
    @-o-keyframes emove{
    
    0% {-o-transform :}
    
    25% {-o-transform :translateY(60%);translateX(20%);}
    
    100% {-o-transform :translateX(-30%);}
    
    }
    
    @keyframes emove{
    
    0% {transform :}
    
    25% {transform :translateY(60%);translateX(20%);}
    
    100% {transform :translateX(-30%);}
    
    } 

    Conclusion :-

    Hence, An Animated Bouncing Smiley is created using CSS3 properties.

    Note :- The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: