Подборка примеров крутой CSS-анимации с исходны кодом

0
1365

Собрали для вас подборку анимированных картинок на чистом CSS с исходным кодом.

1. Вариант черной дыры

Космическая тема всегда вдохновляла художников.

See the Pen
Pure CSS Black hole 2019
by JienHuaGu (@jienhuagoo)
on CodePen.

2. Черный кот

Этот кот или кошка то ли показывает зрителю язык, то ли лакает невидимое молоко.

See the Pen
Cat
by Takane Ichinose (@takaneichinose)
on CodePen.

3. Идущий скелет

Это довольно сложная работа, шедевр по моим меркам.

See the Pen
walking skeleton only css
by Elena (@semenchenko)
on CodePen.

4. Школьный автобус

Просто симпатичный анимированный автобус.

See the Pen
CSS Animation
by Pushpan Kumar G.C. (@pushpan999)
on CodePen.

5. Вращающаяся спираль

Это магическая спираль: она усыпляет и вводит в транс.

See the Pen
3d css spiral ring — pure css animation
by Nooray Yemon (@yemon)
on CodePen.

6. Часы

Эти часы отображаются с помощью CSS и показывают точное время с помощью JavaScript.

See the Pen
Pure CSS Animated Clock
by Jay Salvat (@jaysalvat)
on CodePen.

7. Зверинец

На этой анимации можно увидеть смешных зверей, которые шевелятся.

See the Pen
CSS Animals
by Ashley Watson-Nolan (@ashleynolan)
on CodePen.

8. Дорога

Чтобы изобразить эту дорогу, автор написал 250 строчек CSS-кода.

See the Pen
Road Trip (Looping CSS Animation)
by chilli con code (@chilliconcode)
on CodePen.

9. Светофор

Очень крутая анимация на дорожную тему.

See the Pen
Traffic Lights Pure CSS Animation
by Bertan Yaman (@bertanyaman)
on CodePen.

10. Осьминог

Забавный осьминог на чистом CSS.

See the Pen
CSS Octopus
by CyrisXD (@CyrisXD)
on CodePen.

11. Двигающаяся надпись на футболке

Интересный способ привлечь внимание посетителя сайта к какому-то элементу или тексту.

See the Pen
Think Outside The Box | CSS Animation
by Awedoo Studio (@awedoo)
on CodePen.

12. Прыгающий велосипед

Очень сложная работа: прыгающий велосипед.

See the Pen
CSS Animated Bicycle
by Eric Porter (@EricPorter)
on CodePen.