Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

15 вдохновляющих примеров CSS-анимации на CodePen

by
Length:LongLanguages:

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

CodePen быстро становится местом демонстрации наших возможностей в веб-творчестве. Вот список некоторых замечательных вещей, недавно созданных с помощью анимации CSS!

1. Часы JavaScript Mickey  

Apple watch like Mickey watch by Jay Salvat (@jaysalvat).

Это прекрасный пример объединения CSS-переходов, графики SVG и JavaScript  для прорисовки рук Mickey Mouse на циферблате.

2. CSS Submarine

Submarine with CSS by Alberto Jerez (@ajerez).

Великолепный иллюминатор в этом закруглённом контейнере CSS-animated субмарины придаёт ей шарм.

3. ASCII AT-AT

AT-AT by Tim Pietrusky (@TimPietrusky).

Вдохновлённый Звёздными войнами персонаж AT-AT нарисован в виде цветного мерцающего текста в CSS. Клёвый эффект.

4. SVG/CSS Loader

Loader SVG/CSS by Bidji (@Bidji).

Этот загрузчик использует изменяющиеся цвета, чтобы создать впечатление вращения.

5. 3D CSS Tardis

3D CSS Tardis by Gerwin van Royen (@Gerwinnz).

CSS можно использовать для создания потрясающих 3D-эффектов. Таков 3D tardis:

6. Dozing Bird

Dozing Bird by Peter Klein (@pmk).

Простой художественный стиль и точная анимация придают этой сонной птице иллюзию жизни.

7. Pure CSS border animation

Pure CSS border animation without SVG by Rplus (@rplus).

Простое, но очень эффективное использование границ CSS для создания анимации в стиле загрузки.

8. Star Wars: The Force Awakens

Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh).

Название будущего фильма о Звёздных войнах, созданного с использованием CSS, HTML и небольшого JavaScript.

9. 3D Synth

Pure CSS 3D Synthesizer (mousedown for rotation) by Nikolay Talanov (@suez).

Найдите ключи и вращайте этот 3D-синтезатор, созданный с помощью CSS. Удивительная работа:

10. Cascading Solar System

Cascading Solar System! by Tady Walsh (@tadywankenobi).

Модель нашей солнечной системы с масштабированной скоростью обращения, спутниками и деталями каждой из больших планет. Солнце почти как настоящее!

11. 3D Solar System

Full CSS 3D Solar System by Wayne Dunkley (@waynedunkley).

Другая солнечная система, но на этот раз в 3D. Красивое использование затенения.

12. Flat Design Camera

Flat design camera with CSS animation by Damien Pereira Morberto (@damienpm).

Нажмите кнопку спуска затвора на этой камере, чтобы увидеть, как она фотографирует в анимации CSS.

13. Day and Night Transition

Day Night simulation by Szymon Stypa (@Catagen).

Нажмите кнопку, чтобы увидеть переход из дня в ночь.

14. Animated Sprite with CSS

Animate sprite with CSS by Avaz Bokiev (@samarkandiy).

Демонстрация того, как череда картинок (спрайт) создаёт анимацию остановки передвижения вместе с движением вперёд и назад.

15. Dodecahedron

Dodecahedron by wontem (@wontem).

Тонкий, красивый додекаэдр, созданный и полностью анимированный с помощью CSS.

Заключение

Не так давно мы опирались на инструменты Flash или JavaScript для любой анимации в браузере. Современные браузеры обеспечили лучшую поддержку CSS, с аппаратным ускорением 3D и анимацией.

Благодаря таким сайтам, как CodePen, мы можем обмениваться и учиться легче, чем когда-либо прежде. Какие из увиденных недавно демо-роликов вдохновили вас больше всего?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.