Those interesting Codepen projects

Codepen is an online front-end code editing operation that supports many of today’s front-end technologies, such as Babel, Coffeescript, typescript, SCSS, less, and Stylus. Can be used to display demo or code online.

Codepen currently has many projects, including many excellent works, this week will be a few memorable, practical and interesting projects, my entire collection to recommend to you. No thanks. Like it.


The article is very long and has five parts

1. Graphical items that can be used as a page background

2. The little game

3. The loading project can be improved

4. CSS objects

5. Interesting projects


Graphic items that can be used as a page background

How can a cool website be without a cool dynamic background? Take a look at these artistic creations belowCopy the code

Moving oceanFluid

Flowing rainbowPsychedelic waves

Time travelStrange Attactor

Black whirlwindPerlin Noise Vector Field

Colour the starsCodevember #10

Restless particlesTriangle Springs

colorfulTriangle Springs

simmeringParticle Wave

Light waveswave

Dissipating fireworksSTARDUST

Fireworks lonelinessRising colors

Bright starsGLSL: GPGPU particles

mischiefsGLSL: Marble noise

Hot lavaGLSL: Coral Blooms

The Mosaic song8bits isopleths

timeDaily Pen #12 – Treasure

Ocean currentsDaily Pen #18 – Flow

The auroraWeird threads

Draw the soulParticle Noise

Bloom combustionParticle Noise

Biochemical crisisGLSL: Infinite Voronoi Zoom

Luxuriant ringCreateJS: Ghost Donut

The night spaceGLSL: Gem Soup

Plain blocks of colorVoronoi Graffiti

Some don’t have screenshots, but still good, if your hands are not tired, you can continue to click the link below.

Randomly generated graphics

Voronoi Graffiti

Randomly generated graphics

Love and Peace

YurbanisM randomly generated vines

L ılıııllıı v randomly generated cities

issues

IP – Cloud Particles test steam

glittering particle

Flow Field, Step 4 – Customisable

[1] #Codevember – Galaxy

Whirl 2


Two. Small games

Little games for relaxationCopy the code

Tetris is the game

The dance troupe that destroyed the keyboard

Shoot a gun or something

Switch Game of Trains (PURE CSS/JS, no tricks)

2048 game

Puzzle Game

I don’t know, Tower Blocks

Pixel eating mushroom game

The car

Jigsaw Puzzle Game

Pure CSS & Responsive Tic-Tac-Toe (Modern Browser Only)​

codepen.io

Pure CSS & Responsive Tic-tac-TOE (Modern Browser Only)

3D flight can be not a game, no collision detection TinyPolyWorld – ThreeJS Experiements.

Retro Snake Game

Boring Unbeatable Pong Game

Rotary table


3. Can promote the Loading project force

Tired of looking at chrysanthemums? Let's do a different animationCopy the code

Start with some normal Spin it!! – CSS Spinners & Loaders

CSS3 Loading animations

To Bounded Wave Loader

Crazy Gears # Codevember-18: Motors

Modular SVG Animation Experiment

Bubble Spin it!!!!! – CSS Spinners & Loaders

DOT RUNNING

SVG Animation animated animated SVG logo

Pure CSS animation Only CSS: Donut

Twisted PURE CSS Infinite TWISTING Strip with Oscillating saturation and Lightness (no JS)


Single cloud 3D flashing Moose

Pure CSS is a bit like the Jellyfish Animation

Little Rocket Day 10 -# Codevember-rocket


Shopping class loading


Loading World Locations

Window Better Boilerplate SVG Hero Animation

Subway Train Icon Animation

Earth Rotation Animated SVG-Dribbble Debut

Your page has not been out of the pot Faasos Loader

Tetris Loader

Swing ball CSS Newton’s Cradle

The waves Procedural Sunrise

Pure CSS loop flips the paper cube-loader

Tai Chi ☯ with HTML + CSS, step #8

Lokomotive

Codevember(7)

CSS Image Course: Loading Bars

Iv. CSS objects

A lifetime of two, two born three, CSS born everythingCopy the code

Alex the CSS Husky

Obese CSS Puns – Obese

Coffee Machine CSS Animation can be used to make a cup of Coffee

Turn off the lights and go to sleep Catsomnia

No face, No face

For Christmas use Santa Claus With CSSLighthouse ❄️

Cruise ship/cruise!

# Codevember Nov 2nd Cake randomizer

https://codepen.io/indyplanets/pen/WXrOYa

Electrocuted Rube Goldberg’s Monster

Cake Codevember 002: Cake

FrankenBreakfast

Animated CSS Seasons, Animated by Animated Animated CSS

Parallax Toy Soldiers

CSS Puns-Titanic

Lighthouse animation Lighthouse ❄️

Jellyfish #Codevember 19 – Ocean

#Codevember Day 29: Giraffe

SVG/CSS Clock [WebKit/FF/Opera]

Codevember #3: TreeCodevember #3: Tree​

codepen.io
Codevember #3: Tree

CSS Puns – Parthenon

Codevember 3 Tree – Snowglobe

Animated Weather Cards

Codevember #03 Tree


5. Interesting projects

Dragon 18 palm in the body, after the state of the broken muscles, what power

https://codepen.io/ge1doot/pen/LpLLQa

The Last Experience

Very boring project Kitschy Animated SVG Mardi Gras Parade

Endless Door 505

Exquisite clock

Text Image Mosaic

Only CSS: Text Spot Light

A little tricky Image switching effect THREE Image Transition

Time-lapse photography effect Drawing with CSS3 mix-blend-mode

Daily UI #002: Credit Card Checkout can be used directly if you need to fill in the bank Card project