Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
CodePen tem se tornado, rapidamente, o lugar a mostrar o que podemos fazer com criações web. Eis uma lista de coisas legais que pessoas tem criado com animações CSS recentemente.
1. Relógio JavaScript do Mickey
Apple Watch do Mickey por Jay Salvat (@jaysalvat).
Este é um adorável exemplo da combinação de transições CSS, gráficos SVG e JavaScript para posicionar as mãos do relógio do Mickey Mouse.
2. Submarino CSS
Submarino com CSS por Alberto Jerez (@ajerez).
Um belo uso do conteiner em forma circular na escotilha dá muito charme a esse submarino CSS.
3. ASCII AT-AT
AT-AT por Tim Pietrusky (@TimPietrusky).
Transportador de pessoal baseado no AT-AT do Star Wars usando texto com cores movendos via CSS. Efeito legal.
4. Carregador SVG/CSS
Loader SVG/CSS por Bidji (@Bidji).
Esse carregador usa a mudança de cores para dar a impressão de rotação.
5. Tardis 3D em CSS
3D CSS Tardis por Gerwin van Royen (@Gerwinnz).
CSS pode ser usado para criar efeitos 3D maravilhosos. Eis um Tardis em 3D.
6. Pássaro Sonolento
Dozing Bird por Peter Klein (@pmk).
Estilo artístico simples e a quantidade certa de animação dá a ilusão de vida para esse pássaro sonolento.
7. Animação de Borda em CSS Puro
Pure CSS border animation without SVG por Rplus (@rplus).
Efeito simples porém efetivo de bordas com CSs para criar uma animação de carregamento.
8. Star Wars: O Despertar da Força
Star Wars: The Force Awakens in CSS por Donovan Hutchinson (@donovanh).
O título do filme do Star Wards criado usando CSS, HTML e um pouco de JavaScript.
9. Sintetizador 3D
Pure CSS 3D Synthesizer (mousedown for rotation) por Nikolay Talanov (@suez).
Teste as teclas e gire esse sintetizador 3D criado usando CSS. Trabalho excelente:
10. Sistema Solar em Cascata
Cascading Solar System! por Tady Walsh (@tadywankenobi).
Um modelo do nosso sistema solar, completo com velocidade de rotação escalada, luas e detalhes em cada um dos planetas. O sol até é uma captura real!
11. Sistema Solar 3D
Full CSS 3D Solar System por Wayne Dunkley (@waynedunkley).
Outro sistema solar, mas em 3D. Lindo uso de sombreamento.
12. Câmera em Flat Design
Flat design camera with CSS animation por Damien Pereira Morberto (@damienpm).
Aperte o obturador dessa câmera flat para vê-la cria uma foto usando animação CSS.
13. Transição Dia e Noite
Day Night simulation por Szymon Stypa (@Catagen).
Aperte o botã para ver o dia virar em noite.
14. Sprite Animado com CSS
Animate sprite with CSS por Avaz Bokiev (@samarkandiy).
Demonstração de como uma sequência de imagens (sprite) pode ser usada para criar animação stop-motion, completa com movimentação direta e reversa.
15. Dodecahedron
Dodecahedron por wontem (@wontem).
Um dodecaedro súbito e bonito criado e animado apenas com CSS.
Conclusão
Não muito tempo atrás, teríamos usado Flash ou JavaScript para qualquer animação no navegador. Navegadores modernos trazem melhor suporte ao CSS com 3D acelerador por hardware e animação.
Graças a sites como CodePen, podemos compartilhar e aprender mais facilmente que nunca. Quais são as demos animadas mais inspiradores que vimos recentemente?
By
