CSS-ONLY

DRAWING AND ANIMATION

Mouse over cards for more information. Scroll down for more!

Liquid bowl

Draw and animate with only CSS

  • CSS animations (rotate, hue-rotate)
  • Glowing effect
  • All drawn using CSS

Monster and bird

Use of spritesheets for custom animations

  • CSS animations (steps, position)
  • Monster spritesheet credit to Guil H
  • Bird spritesheet credit to Jade Snowball

Scanning...

Fingerprint scanning

CSS animations combining images and drawing

  • CSS animations (move, opacity)
  • Glowing effect
  • Scan line drawn using CSS
  • Fingerprint images credit to Talha Dogar - Flaticon

Bouncing ball

Draw and animate with only CSS

  • CSS animations (move)
  • Ball 3D effect
  • All drawn using CSS

3D layered image

3D CSS animations

  • CSS animations (rotate, translate)
  • Use of CSS variables
  • 3D effect
  • Layered effect
  • Image credit to gstudioimagen1 - Freepik

3D glowing cube

3D CSS drawing and animations

  • CSS animations (rotate)
  • Use of CSS variables
  • Glowing effect
  • 3D effect
  • All drawn using CSS