- Home
- >> Nerd Digest
- >> CSS
-
An Animated Bouncing Smiley Using CSS3
over 8 years ago
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)