コード共有サイト CodePen で2016年に人気だった投稿ベスト100

100位～91位

The most hearted Pens of 2016 100位～91位 より

100位

SVG Page Hopper

99位

Mobile navigation animation

98位

[WIP] Landing Animation for BBAE

97位

Material Compact Login Animation

96位

Touch device jelly menu concept

95位

Css3 Transform

94位

Cub n Pup - puzzle game demo

93位

Velocity.js fullscreen flexbox overlay navigation

92位

CSS Snow Fox

91位

Floatting Draggable Menu (Messenger like)

90位～81位

The most hearted Pens of 2016 90位～81位 より

90位

Pure CSS Header Menu

89位

CSS-only Colorful Calendar Concept

88位

CSS3 text-shadow effects

87位

Interactive Sign Up Form

86位

One page scroll with depth effect (?)

85位

Gooey Menu

84位

Imperfect Buttons

83位

Phone-Styled IFrame

82位

Login Box Concept

81位

3D card

80位～71位

The most hearted Pens of 2016 80位～71位 より

80位

CSS Parallax Orbs

79位

Stats animation.

78位

Building a Vertical Timeline With CSS and a Touch of JavaScript

77位

Multi Step Form with Progress Bar using jQuery and CSS3

76位

Flipside

75位

#2 - Project Deadline - SVG animation with CSS3

74位

Animated Weather Icons

73位

Simple Tile Hover Effect

72位

Add to cart interaction

71位

Freebie Interactive Flat Design UI / Only HTML5 & CSS3

70位～61位

The most hearted Pens of 2016 70位～61位 より

70位

Meshi the CSS Dog

69位

10 stylish hover effects with less

68位

Menu "Hamburger" Icon Animations

67位

Button Hover Effects

66位

Pull Menu - Menu Interaction Concept

65位

Confetti Cannon

64位

Pure CSS Parallax Scrolling

63位

SVG Animated Drum Kit (Play Me!) 🥁

62位

freeCodeCamp : Build a Personal Portfolio Webpage

61位

Fizzy Sparks

60位～51位

The most hearted Pens of 2016 60位～51位 より

60位

Timeline Style Navigation

59位

Delivery Card Animation

58位

Responsive Modal Design

57位

Tearable Cloth v2

56位

Material Design Box Shadows

55位

Sign-Up/Login Form

54位

Material Design - Responsive card

53位

CSS Eevee

52位

Article News Card

51位

·● MOTION for the web ●·

50位～41位

The most hearted Pens of 2016 50位～41位 より

50位

Expanding Column Layout

49位

Interactive Form

48位

Skewed One Page Scroll

47位

Animated Weather Cards

46位

DailyUI #019 - Leaderboard

45位

Parallax Star background in CSS

44位

anime.js logo animation

43位

Material Login Form

42位

Split 3D Carousel

41位

Clean Slider With Curved Background

40位～31位

The most hearted Pens of 2016 40位～31位 より

40位

Colourful Flower Popup Menu

39位

Button Hover States

38位

A Pen by Anand Davaasuren

37位

Text particle

36位

Direction-aware 3D hover effect (Concept)

35位

SVG Loading icons

34位

One Page Navigation CSS Menu

33位

Interactive SVG Info Graph

32位

Calm breeze login screen

31位

Fullscreen HTML5 Page Background Video

30位～21位

The most hearted Pens of 2016 30位～21位 より

30位

Color Changin'

29位

Modal Animations

28位

Waves

27位

Swanky Pure CSS Drop Down Menu V2.0

26位

Rotating text

25位

10 stunning hover effects with sass

24位

Login/Logout animation concept

23位

pen#PwLXXP

22位

The Last Experience

21位

Reverse clip path with blend modes

20位～11位

The most hearted Pens of 2016 20位～11位 より

20位

Elastic SVG Sidebar Material Design

19位

Full Page Parallax Scroll Effect

18位

Demo: CSS image hover effects

17位

Daily UI #002: Credit Card Checkout

16位

I DESIGN WITH CODE ❤

15位

SVG clip-path Hover Effect

14位

Multi-layered Parallax Illustration

13位

Collection of Button Hover Effects

12位

·•● Bubble • Layout ●•·

11位

Chill the lion

10位～1位

The most hearted Pens of 2016 10位～1位 より

10位

CSS 3D Solar System

9位

Cool Layout with Complex Chainable Animation

8位

Tearable Cloth

7位

CSS only scroll indicator

6位

Musical Chord Progression Arpeggiator

5位

freeCodeCamp : Build a Tribute Page

4位

Alex the CSS Husky

3位

THREE Image Transition

2位

Flexbox playground

1位

Gravity Points

関連note