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

Ukrainian (українська мова) translation by Andy Yur (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.