эти забавные проекты codepen

codepenЭто веб-сайт для редактирования и запуска внешнего интерфейса, поддерживающий многие внешние технологии, такие как babel, coffeescript, typescript, scss, less, stylus. Может использоваться для отображения демо или кода онлайн.

Сейчас у Codepen много проектов, в том числе много отличных работ, в этом выпуске еженедельника я порекомендую всем незабываемые, практичные и интересные проекты, которые я собрал. Нет, спасибо, просто лайк и поддержка.

Статья очень длинная и состоит из пяти частей

1. Графические элементы, которые можно использовать в качестве фона страницы

2. Маленькие игры

3. Загрузка предметов, которые могут улучшить силу

4. css-объекты

5. Интересные проекты

1. Графические элементы, которые можно использовать в качестве фона страницы

一个酷炫的网站怎么能缺少一个酷炫的动态背景呢？，看看下面这些艺术般的创意实现吧

текущий океанFluid

https://codepen.io/shamir/pen/JEMovg

плавная радугаPsychedelic waves

https://codepen.io/Yakudoo/pen/rJjOJx

путешествие во времениStrange Attactor

https://codepen.io/thepheer/pen/LGyZeW

черный вихрьPerlin Noise Vector Field

https://codepen.io/shubniggurath/pen/rYWBvL

красочное звездное небоCodevember #10

https://codepen.io/gotoandplaynowtoo/pen/aVJEbq

беспокойные частицыTriangle Springs

https://codepen.io/Kadae/pen/vKjmpB

AmbilightTriangle Springs

https://codepen.io/arianr/pen/OXGoOd

кипениеParticle Wave

https://codepen.io/Supercopra/pen/gvNKGN?editors=0010#0

световая волнаwave

https://codepen.io/dpdknl/pen/gXoEMV

рассеянный фейерверкSTARDUST

https://codepen.io/plasm/pen/eyKzgG

одинокий фейерверкRising colors

https://codepen.io/octopus11/pen/reqNqM

яркое звездное небоGLSL: GPGPU particles

https://codepen.io/shubniggurath/pen/RQKgWg

пройти мимоGLSL: Marble noise

https://codepen.io/shubniggurath/pen/dZQOMm

горячая лаваGLSL: Coral Blooms

https://codepen.io/shubniggurath/pen/vpNxWN

Песня мозаики8bits isopleths

https://codepen.io/Mamboleoo/pen/bLWrbx

стримерDaily Pen #12 - Treasure

https://codepen.io/kelvinh111/pen/ZrJOvR

https://codepen.io/YusukeNakaya/pen/BmYGON

Океанские теченияDaily Pen #18 - Flow

https://codepen.io/kelvinh111/pen/ZrxmrE

северное сияниеWeird threads

https://codepen.io/terabaud/pen/bYmgaY

душа обнаженаParticle Noise

https://codepen.io/ajm13/pen/qraGKY

жгучее цветениеParticle Noise

https://codepen.io/ajm13/pen/aWogXd

обитель злаGLSL: Infinite Voronoi Zoom

https://codepen.io/shubniggurath/pen/JMzQRw

Великолепный ореолCreateJS: Ghost Donut

https://codepen.io/createjs/pen/VrXzYN

Темное ночное пространствоGLSL: Gem Soup

https://codepen.io/shubniggurath/pen/vWQmOr

деревенский колор-блокVoronoi Graffiti

https://codepen.io/elifitch/pen/rglbq

Есть еще некоторые без скриншотов, которые все еще относительно хороши.Если руки не устали, вы можете продолжить, нажав на ссылку ниже.

случайно сгенерированная графика

Voronoi Graffiti

случайно сгенерированная графика

Love and Peace

YurbanisMСлучайно сгенерированные лозы

lılıııllıı vслучайно сгенерированный город

issues

wip -cloud particles testпар

glittering particle

Flow Field, Step 4 - Customisable

[1] #Codevember - Galaxy

Whirl 2

2. Маленькие игры

撸点小游戏解解闷

тетрисTetris the game

https://codepen.io/iftrrtrn/pen/EKwJLo?limit=all&page=15&q=game

Прослушивание, которое испортило клавиатуру

https://codepen.io/arkhlima/pen/MypWbv?limit=all&page=17&q=game

пушки и т.д.

https://codepen.io/haidang/pen/zRLppr?limit=all&page=18&q=game

стрелочникGame of Trains (PURE CSS/JS, no tricks)

https://codepen.io/ghostreef/pen/ZXjqJO?limit=all&page=28&q=game

2048 game

https://codepen.io/camsong/pen/wcKrg

я до сих пор не понимаю как игратьPuzzle Game

https://codepen.io/mohebifar/pen/LVGWqM?limit=all&page=6&q=game

Я не знаю, как это называется, пока назовем это кучей хлеба.Tower Blocks

https://codepen.io/steveg3003/pen/ppLQNW

Пиксели едят грибыgame

https://codepen.io/arshdkhn1/pen/QKkvJv

гонки

https://codepen.io/johan-tirholm/pen/PGYExJ?limit=all&page=7&q=game

головоломкаPuzzle Game

https://codepen.io/karimnaaji/pen/uEleL?limit=all&page=15&q=game

Чистый CSS и адаптивные крестики-нолики (только для современного браузера)

codepen.io

https://codepen.io/karimnaaji/pen/uEleL?limit=all&page=15&q=game

Gobang, что высокий IQ не может игратьPure CSS & Responsive Tic-Tac-Toe (Modern Browser Only)

https://codepen.io/saawsan/pen/wpXGWQ

3D полет, а не игра, без обнаружения столкновенийTinyPolyWorld - ThreeJS experiements.

https://codepen.io/Zultan/pen/mwGZBP

ЗмеяRetro Snake Game

https://codepen.io/mr-moon/pen/YYvwap

скучный настольный теннисUnbeatable Pong Game

https://codepen.io/satyamdev/pen/pdMmBp

Проигрыватель

https://codepen.io/n7best/pen/EtFcH

3. Загрузка предметов, которые могут улучшить стиль

菊花看烦了没？来点不一样的动画

давайте нормальноSpin it!! - CSS Spinners & Loaders

https://codepen.io/rajatkantinandi/pen/vdxzaV

CSS3 Loading animations

https://codepen.io/Manoz/pen/pydxK

волна вверхBounded Wave Loader

https://codepen.io/zFunx/pen/gXjvpb

сумасшедшая передача#codevember - 18: Motors

https://codepen.io/ilithya/pen/LOJGgm

барочный гороскопModular SVG Animation Experiment

https://codepen.io/DCtheTall/pen/KWpdRV

пузырьSpin it!! - CSS Spinners & Loaders

https://codepen.io/rajatkantinandi/pen/vdxzaV

Пиксельный бегущий злодейDOT RUNNING

https://codepen.io/kimmy/pen/mJNXXr

SVG-анимацияanimated svg logo

https://codepen.io/NorahSay/pen/MraBzp

Анимация на чистом CSS.Only CSS: Donut

https://codepen.io/YusukeNakaya/pen/ypyVKO

скрученный домино на чистом cssInfinite twisting strip with oscillating saturation and lightness (no JS)

https://codepen.io/thebabydino/pen/NXqpez

Сдаться в круг3D flashing Moose

https://codepen.io/flashingmoose/pen/vNQELw

Чистый CSS немного похож на медузуJellyfish Animation

https://codepen.io/mkmueller/pen/keAbx

маленькая ракетаDay 10 -#codevember - Rocket

https://codepen.io/cassie-codes/pen/ZaeaoO

Загрузка класса покупок

https://codepen.io/sdras/pen/GOBGjg

Класс путешествия ЗагрузкаWorld Locations

https://codepen.io/chrisgannon/pen/GOYLbY

окноBetter Boilerplate SVG Hero Animation

https://codepen.io/matchboxhero/pen/NXwVGR

Маленький поездSubway Train Icon Animation

https://codepen.io/codyogden/pen/OpyPoN

вращение ЗемлиAnimated SVG - Dribbble Debut

https://codepen.io/taiwei426/pen/EVqMaX

Ваша страница еще не вышлаFaasos Loader

https://codepen.io/madhusudhand/pen/QayaWN

тетрисTetris Loader

https://codepen.io/charlottejoy/pen/aEwKMB

маятникCSS Newton's Cradle

https://codepen.io/wagnermoschini/pen/RxooKO

волнаProcedural Sunrise

https://codepen.io/zachernuk/pen/aJgYvN

Чистая бумага css для перелистывания петлиcube-loader

https://codepen.io/menem/pen/akPvEy

Тай Чи☯ с HTML + CSS, шаг №8

Lokomotive

Codevember(7)

CSS Image Course: Loading Bars

4. CSS-объекты

一生二，二生三，css生万物

Милый хаскиAlex the CSS Husky

https://codepen.io/davidkpiano/pen/wMqXea

толстыйCSS Puns - Obese

https://codepen.io/KazikM/pen/qjoJJZ

Кофемашина, готовящая чашку кофе, фактически может использоваться для загрузки и ожидания.Coffee Machine CSS Animation

https://codepen.io/jenningscreate/pen/pdMMZJ

выключи свет, чтобы спатьCatsomnia

https://codepen.io/alvov/pen/wddJOQ

Безликий призрак, выражение очень правильноеNo face

https://codepen.io/aepicos/pen/wPQNoZ

полезно для РождестваSanta Claus With CSS Маяк ❄️

https://codepen.io/isacdias/pen/ZBwYaO

круизный корабльship/cruise!

https://codepen.io/lilianqian/pen/YEzNLR

Торт на день рождения#codevember Nov 2nd Cake randomizer

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

поражение электрическим токомRube Goldberg's Monster

https://codepen.io/joshbader/pen/PJWjEQ

тортCodevember 002: Cake

https://codepen.io/cobra_winfrey/pen/LOprGM

FrankenBreakfast

https://codepen.io/iggPen/pen/LzZWwE

Анимация четырех сезонов CSSAnimated CSS Seasons

https://codepen.io/agathaco/pen/rpZoYd

СолдатParallax Toy Soldiers

опрокидыватьсяCSS Puns - Titanic

маяк анимацияМаяк ❄️

медуза#Codevember 19 - Ocean

жирафа#Codevember Day 29: Giraffe

ЧасыSVG/CSS Clock [WebKit/FF/Opera]

Codevember #3: Tree Декабрь #3: Дерево

codepen.io

Codevember #3: Tree

CSS Puns - Parthenon

Codevember 3 Tree - Snowglobe

Animated Weather Cards

Codevember #03 Tree

5. Интересные проекты

Восемнадцать ладоней для нисходящих драконов в теле, состояние после полного разрыва мышц и вен,what power

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

The Last Experience

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

очень скучный проектKitschy Animated SVG Mardi Gras Parade

https://codepen.io/WhizofaWiz/pen/MYJLpX

Бесконечные воротаEndless Hallway

https://codepen.io/cobra_winfrey/pen/PQNjKw

тонкие часы

https://codepen.io/vineethtr/pen/GvROZV

Код, который любят только фермеры, установите артефакт BText Image Mosaic

https://codepen.io/dudleystorey/pen/EbOqwa

эффекты шрифтаOnly CSS: Text Spot Light

https://codepen.io/YusukeNakaya/pen/KyKJBE

Немного хитрый эффект переключения картинокTHREE Image Transition

https://codepen.io/zadvorsky/pen/PNXbGo

Эффект замедленной съемкиDrawing with CSS3 mix-blend-mode

https://codepen.io/clockmaker/pen/vNyjxa

Необходимость заполнения проекта банковской карты может быть использована напрямуюDaily UI #002: Credit Card Checkout

https://codepen.io/supah/pen/OMdPpW