Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

15 exemplos inspiradores de CSS no CodePen

by
Length:LongLanguages:

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?

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.