Ajax Loader
×

CSS3 Animated Smileys

A very cool and jumping set of smileys created (and animated) purely in CSS3. This is the work of Joel Warren. He used just one div tag to create one smiley. The expressions are just characters like :) ;) :D that are beautified by using "Comic Sans" as the font.

Basically, the characters for the expression are rotated to create a vertical face and then the div is used as the outline of the smiley with the help of border and border-radius.

They are animated using the CSS3 animation and keyframe properties with a very subtle hover effect. Feel free to check out the code below. The author made it to work only with FF so I added -webkit- prefixes to make it work in Webkit browsers too! 

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS3 Animated Smileys

    CSSDeck G+