Doodling with CSS3.
Candy demo is a CSS-based animation. It takes advantage of some nice CSS features:
- keyframe-based animations
- gradients and gradient stacking
- viewport-based sizing
The candy is made of four identical parts, each consisting of three radial gradients. Latter three are rotated by 90, 180 and 270 degrees, respectively. Then, entire candy is clipped to a circle using the
border-radius property and another element is created over it to add gradient-based shadow.
Rays of light are made from two identical parts, second one flipped vertically using a
scaleY transform with negative argument. Each part is created by clipping a nested
div to its parent’s boundaries. Then, rays are rotated by adequate angles and an animation is applied.
Falling cookies in the background („cookieflakes”) are just smaller copies of the big one, each one with three animations applied: rotation, falling and horizontal waving. Each animation has separate properties: waving is faster than the other two and it’s reversed upon completion, instead of restarting.
See the demo on its page.
Supported browser versions: Chrome 26+, FF 19+, IE 11, Opera 15.