() translation by (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, ми можемо обмінюватися і вчитися легше, ніж будь-коли раніше. Які з побачених недавно демо-роликів надихнули вас найбільше?
