Top 10 CodePens of the Week

Chris Sevilleja
πŸ‘οΈ 24,247 views
πŸ’¬ comments

Today we're going to start off a weekly series. We'll be showcasing 10 of the best demos we've found on Codepen. Whether it be some cool new technology or a smart use of technologies we're already familiar with, these demos will help fuel your imagination. Enjoy, learn, create!

MENU to Close Arrow

See the Pen MENU to Close Arrow by Joseph Fusco (@fusco) on CodePen.

Bloc Hover Animation

See the Pen Bloc hover animation by SΓ©bastien Lombard (@SebL) on CodePen.

Table of Contents

    CSS Loading Animation

    Press RERUN if you don't see the animation.

    See the Pen xpHtr by Munky (@munky221) on CodePen.

    CSS Animated Business Card

    See the Pen Business Card /r/web_design -- Ciclop by Eduard Kosicky (@heyitsedward) on CodePen.

    Creative CSS Captions

    See the Pen Creative Caption Gallery (Responsive) by Joshua Mitchell (@Joshuasm32) on CodePen.

    Hamburger Menu!

    See the Pen CSS Menu Burger by Jack Rugile (@jackrugile) on CodePen.

    CSS Loading Animation

    Press RERUN if you don't see the animation.

    See the Pen Circle-gram by Max Yeo (@yeo) on CodePen.

    CSS Dot Loading Animation

    Press RERUN if you don't see the animation.

    See the Pen Loader a Day (day 23) by Reinier Kaper (@TheDutchCoder) on CodePen.

    JavaScript Paper Rock Scissors

    See the Pen PAPER - STONE - SCISSORS by fscode (@fscode) on CodePen.

    All CSS Clock

    Press RERUN if you don't see the animation.

    See the Pen CSS3 Working Clock by Ilia (@iliadraznin) on CodePen.

    Neat :active and :focused Input Effects

    See the Pen Some :active & :focus effects by LukyVJ (@LukyVj) on CodePen.

    Chris Sevilleja

    173 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.