7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS Animation

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

Read Time: 2 mins

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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.