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.
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%.