Animações CSS e HTML

Coleção de animações prontas em HTML e CSS. Veja a prévia ao vivo, escolha o framework e copie o código.

Texto com Gradiente Animado

Texto com gradiente de cores que desliza horizontalmente em loop infinito.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14    font-family: Arial, sans-serif;
15  }
16  .texto-gradiente {
17    font-size: 3rem;
18    font-weight: 900;
19    background: linear-gradient(90deg, #f97316, #ef4444, #a855f7, #3b82f6, #f97316);
20    background-size: 300% 100%;
21    -webkit-background-clip: text;
22    background-clip: text;
23    color: transparent;
24    animation: gradiente 4s linear infinite;
25  }
26  @keyframes gradiente {
27    0% { background-position: 0% 50%; }
28    100% { background-position: 300% 50%; }
29  }
30</style>
31</head>
32<body>
33  <h1 class="texto-gradiente">Animação CSS</h1>
34</body>
35</html>

Efeito Máquina de Escrever

Texto digitado letra por letra com cursor piscando, tudo em CSS puro.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14    font-family: "Courier New", monospace;
15  }
16  .digitando {
17    font-size: 2rem;
18    color: #0ea5e9;
19    white-space: nowrap;
20    overflow: hidden;
21    width: 12ch;
22    border-right: 3px solid #0ea5e9;
23    animation: digitar 3s steps(12) infinite, piscar 0.7s step-end infinite;
24  }
25  @keyframes digitar {
26    0% { width: 0; }
27    100% { width: 12ch; }
28  }
29  @keyframes piscar {
30    50% { border-color: transparent; }
31  }
32</style>
33</head>
34<body>
35  <div class="digitando">Olá, mundo!</div>
36</body>
37</html>

Letras Saltando

Cada letra do texto salta para cima e volta, com atraso progressivo entre elas.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14    font-family: Arial, sans-serif;
15  }
16  .letras span {
17    display: inline-block;
18    font-size: 3rem;
19    font-weight: 900;
20    color: #f59e0b;
21    animation: saltar 1s ease-in-out infinite;
22  }
23  @keyframes saltar {
24    0%, 100% { transform: translateY(0); }
25    50% { transform: translateY(-28px); }
26  }
27</style>
28</head>
29<body>
30  <h1 class="letras">
31    <span style="animation-delay: 0s">A</span>
32    <span style="animation-delay: 0.1s">N</span>
33    <span style="animation-delay: 0.2s">I</span>
34    <span style="animation-delay: 0.3s">M</span>
35    <span style="animation-delay: 0.4s">A</span>
36    <span style="animation-delay: 0.5s">Ç</span>
37    <span style="animation-delay: 0.6s">Ã</span>
38    <span style="animation-delay: 0.7s">O</span>
39  </h1>
40</body>
41</html>

Botão com Brilho

Um brilho diagonal atravessa o botão quando o usuário passa o mouse.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14    font-family: Arial, sans-serif;
15  }
16  .btn-brilho {
17    position: relative;
18    overflow: hidden;
19    padding: 16px 40px;
20    border: none;
21    border-radius: 12px;
22    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
23    color: #fff;
24    font-size: 1.1rem;
25    font-weight: 700;
26    cursor: pointer;
27  }
28  .btn-brilho::after {
29    content: "";
30    position: absolute;
31    top: 0;
32    left: -80%;
33    width: 40%;
34    height: 100%;
35    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
36    transform: skewX(-20deg);
37    transition: left 0.6s ease;
38  }
39  .btn-brilho:hover::after {
40    left: 120%;
41  }
42</style>
43</head>
44<body>
45  <button class="btn-brilho">Passe o mouse</button>
46</body>
47</html>

Card com Efeito 3D

Card que inclina em perspectiva 3D e ganha sombra ao passar o mouse.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14    font-family: Arial, sans-serif;
15  }
16  .card-3d {
17    width: 260px;
18    padding: 32px;
19    border-radius: 16px;
20    background: linear-gradient(135deg, #f59e0b, #ef4444);
21    color: #fff;
22    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
23    transition: transform 0.3s ease, box-shadow 0.3s ease;
24  }
25  .card-3d h2 { margin: 0 0 8px; font-size: 1.4rem; }
26  .card-3d p { margin: 0; opacity: 0.9; font-size: 0.95rem; }
27  .card-3d:hover {
28    transform: perspective(800px) rotateX(10deg) rotateY(-10deg) translateY(-8px);
29    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
30  }
31</style>
32</head>
33<body>
34  <div class="card-3d">
35    <h2>Título do Card</h2>
36    <p>Passe o mouse para ver o efeito 3D.</p>
37  </div>
38</body>
39</html>

Imagem com Zoom

Imagem que amplia suavemente dentro de um contêiner com cantos arredondados.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14    font-family: Arial, sans-serif;
15  }
16  .img-zoom {
17    width: 400px;
18    height: 300px;
19    overflow: hidden;
20    border-radius: 16px;
21  }
22  .img-zoom img {
23    width: 100%;
24    height: 100%;
25    object-fit: cover;
26    transition: transform 0.5s ease;
27  }
28  .img-zoom:hover img {
29    transform: scale(1.2);
30  }
31</style>
32</head>
33<body>
34  <div class="img-zoom">
35    <img src="https://picsum.photos/seed/animacao/400/300" alt="Imagem de exemplo" />
36  </div>
37</body>
38</html>

Spinner de Carregamento

Loader circular clássico que gira continuamente em CSS puro.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14  }
15  .spinner {
16    width: 48px;
17    height: 48px;
18    border: 5px solid #e2e8f0;
19    border-top-color: #3b82f6;
20    border-radius: 50%;
21    animation: girar 0.9s linear infinite;
22  }
23  @keyframes girar {
24    to { transform: rotate(360deg); }
25  }
26</style>
27</head>
28<body>
29  <div class="spinner"></div>
30</body>
31</html>

Pontos Pulando

Três pontos que pulam em sequência, indicando carregamento.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14  }
15  .pontos span {
16    display: inline-block;
17    width: 16px;
18    height: 16px;
19    margin: 0 4px;
20    background: #8b5cf6;
21    border-radius: 50%;
22    animation: pular 0.6s ease-in-out infinite;
23  }
24  .pontos span:nth-child(2) { animation-delay: 0.15s; }
25  .pontos span:nth-child(3) { animation-delay: 0.3s; }
26  @keyframes pular {
27    0%, 100% { transform: translateY(0); opacity: 0.6; }
28    50% { transform: translateY(-16px); opacity: 1; }
29  }
30</style>
31</head>
32<body>
33  <div class="pontos">
34    <span></span>
35    <span></span>
36    <span></span>
37  </div>
38</body>
39</html>

Barra de Progresso Infinita

Barra de progresso que desliza de um lado a outro em loop contínuo.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14  }
15  .barra-progresso {
16    width: 260px;
17    height: 8px;
18    background: #e2e8f0;
19    border-radius: 99px;
20    overflow: hidden;
21  }
22  .barra-progresso span {
23    display: block;
24    width: 40%;
25    height: 100%;
26    background: linear-gradient(90deg, #3b82f6, #a855f7);
27    border-radius: 99px;
28    animation: deslizar 1.4s ease-in-out infinite;
29  }
30  @keyframes deslizar {
31    0% { transform: translateX(-100%); }
32    100% { transform: translateX(350%); }
33  }
34</style>
35</head>
36<body>
37  <div class="barra-progresso" role="progressbar" aria-label="Carregando">
38    <span></span>
39  </div>
40</body>
41</html>

Card com Flip 3D

Card que gira 180° em 3D no hover, revelando o verso.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14    font-family: Arial, sans-serif;
15  }
16  .flip {
17    width: 220px;
18    height: 280px;
19    perspective: 1000px;
20    cursor: pointer;
21  }
22  .flip-inner {
23    position: relative;
24    width: 100%;
25    height: 100%;
26    transform-style: preserve-3d;
27    transition: transform 0.7s;
28  }
29  .flip:hover .flip-inner {
30    transform: rotateY(180deg);
31  }
32  .flip-frente,
33  .flip-verso {
34    position: absolute;
35    inset: 0;
36    display: flex;
37    align-items: center;
38    justify-content: center;
39    border-radius: 16px;
40    backface-visibility: hidden;
41    font-size: 1.5rem;
42    font-weight: 700;
43    color: #fff;
44  }
45  .flip-frente {
46    background: linear-gradient(135deg, #0ea5e9, #6366f1);
47  }
48  .flip-verso {
49    background: linear-gradient(135deg, #f43f5e, #a855f7);
50    transform: rotateY(180deg);
51  }
52</style>
53</head>
54<body>
55  <div class="flip">
56    <div class="flip-inner">
57      <div class="flip-frente">Frente</div>
58      <div class="flip-verso">Verso</div>
59    </div>
60  </div>
61</body>
62</html>

Elemento Flutuante

Uma div que flutua para cima e para baixo suavemente em loop infinito.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14    font-family: Arial, sans-serif;
15  }
16  .flutuante {
17    width: 120px;
18    height: 120px;
19    display: flex;
20    align-items: center;
21    justify-content: center;
22    border-radius: 24px;
23    background: linear-gradient(135deg, #22c55e, #0ea5e9);
24    color: #fff;
25    font-weight: 700;
26    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
27    animation: flutuar 3s ease-in-out infinite;
28  }
29  @keyframes flutuar {
30    0%, 100% { transform: translateY(0); }
31    50% { transform: translateY(-24px); }
32  }
33</style>
34</head>
35<body>
36  <div class="flutuante">Flutuar</div>
37</body>
38</html>

Pulse com Onda

Círculo com anel de ondas que se expande e desaparece em loop.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14  }
15  .pulse {
16    width: 80px;
17    height: 80px;
18    border-radius: 50%;
19    background: #10b981;
20    animation: pulso 1.8s ease-out infinite;
21  }
22  @keyframes pulso {
23    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
24    100% { box-shadow: 0 0 0 28px rgba(16, 185, 129, 0); }
25  }
26</style>
27</head>
28<body>
29  <div class="pulse"></div>
30</body>
31</html>

Texto Neon Pulsante

Texto com brilho de neon que pulsa, perfeito para títulos de destaque.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #000;
14    font-family: Arial, sans-serif;
15  }
16  .texto-neon {
17    font-size: 3rem;
18    font-weight: 900;
19    color: #22d3ee;
20    text-shadow:
21      0 0 5px rgba(34, 211, 238, 0.8),
22      0 0 15px rgba(34, 211, 238, 0.7),
23      0 0 30px rgba(34, 211, 238, 0.5);
24    animation: neon 2s ease-in-out infinite;
25  }
26  @keyframes neon {
27    0%, 100% { text-shadow: 0 0 5px rgba(34, 211, 238, 0.8), 0 0 15px rgba(34, 211, 238, 0.7), 0 0 30px rgba(34, 211, 238, 0.5); }
28    50% { text-shadow: 0 0 10px rgba(34, 211, 238, 1), 0 0 30px rgba(34, 211, 238, 0.9), 0 0 60px rgba(34, 211, 238, 0.7); }
29  }
30</style>
31</head>
32<body>
33  <h1 class="texto-neon">NEON</h1>
34</body>
35</html>

Sublinhado Animado

Link com sublinhado que cresce da esquerda para a direita ao passar o mouse.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14    font-family: Arial, sans-serif;
15  }
16  .link-animado {
17    position: relative;
18    text-decoration: none;
19    font-size: 1.6rem;
20    font-weight: 700;
21    color: #fbbf24;
22  }
23  .link-animado::after {
24    content: "";
25    position: absolute;
26    left: 0;
27    bottom: -4px;
28    width: 100%;
29    height: 3px;
30    background: #fbbf24;
31    border-radius: 3px;
32    transform: scaleX(0);
33    transform-origin: left;
34    transition: transform 0.4s ease;
35  }
36  .link-animado:hover::after {
37    transform: scaleX(1);
38  }
39</style>
40</head>
41<body>
42  <a class="link-animado" href="#">Passe o mouse</a>
43</body>
44</html>

Skeleton Shimmer

Placeholder de carregamento com brilho deslizante, usado em cards e listas.

1<!DOCTYPE html>
2<html lang="pt-BR">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<style>
7  body {
8    margin: 0;
9    height: 100vh;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    background: #0f172a;
14  }
15  .skeleton {
16    position: relative;
17    overflow: hidden;
18    width: 300px;
19    height: 120px;
20    border-radius: 16px;
21    background: #1e293b;
22  }
23  .skeleton::after {
24    content: "";
25    position: absolute;
26    inset: 0;
27    transform: translateX(-100%);
28    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
29    animation: shimmer 1.6s infinite;
30  }
31  @keyframes shimmer {
32    100% { transform: translateX(100%); }
33  }
34</style>
35</head>
36<body>
37  <div class="skeleton"></div>
38</body>
39</html>

O que é esta ferramenta?

Coleção de animações prontas em HTML e CSS para texto, imagens, divs e spans. Cada animação tem prévia ao vivo e código para Vanilla JS, React, React Native e Angular.

Como usar?

Escolha uma categoria de animação ou navegue por todas.
Veja a prévia ao vivo da animação renderizada em HTML e CSS.
Selecione o framework desejado: Vanilla, React, React Native ou Angular.
Clique em Copiar e cole o código no seu projeto.

Como funciona?

As animações de Vanilla JS são documentos HTML autocontidos com CSS puro (keyframes, transitions e transforms). Para React e Angular o código usa o mesmo CSS com a estrutura de componentes; para React Native, as animações são implementadas com a API Animated nativa do RN, que não usa CSS.

Dicas de uso

Use as animações de loading em botões e telas de carregamento.
Animações de hover funcionam apenas em dispositivos com mouse — ofereça fallback em mobile.
Prefira transform e opacity em keyframes para melhor desempenho.

⚠️ Atenção

Animações em excesso podem prejudicar a experiência e a performance.
Respeite a preferência 'reduzir movimento' dos usuários em projetos acessíveis.
As prévias usam imagens de exemplo; substitua pelas suas.

Perguntas Frequentes

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 font-family: Arial, sans-serif;

15 }

16 .texto-gradiente {

17 font-size: 3rem;

18 font-weight: 900;

19 background: linear-gradient(90deg, #f97316, #ef4444, #a855f7, #3b82f6, #f97316);

20 background-size: 300% 100%;

21 -webkit-background-clip: text;

22 background-clip: text;

23 color: transparent;

24 animation: gradiente 4s linear infinite;

25 }

26 @keyframes gradiente {

27 0% { background-position: 0% 50%; }

28 100% { background-position: 300% 50%; }

29 }

30</style>

31</head>

32<body>

33 <h1 class="texto-gradiente">Animação CSS</h1>

34</body>

35</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 font-family: "Courier New", monospace;

15 }

16 .digitando {

17 font-size: 2rem;

18 color: #0ea5e9;

19 white-space: nowrap;

20 overflow: hidden;

21 width: 12ch;

22 border-right: 3px solid #0ea5e9;

23 animation: digitar 3s steps(12) infinite, piscar 0.7s step-end infinite;

24 }

25 @keyframes digitar {

26 0% { width: 0; }

27 100% { width: 12ch; }

28 }

29 @keyframes piscar {

30 50% { border-color: transparent; }

31 }

32</style>

33</head>

34<body>

35 <div class="digitando">Olá, mundo!</div>

36</body>

37</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 font-family: Arial, sans-serif;

15 }

16 .letras span {

17 display: inline-block;

18 font-size: 3rem;

19 font-weight: 900;

20 color: #f59e0b;

21 animation: saltar 1s ease-in-out infinite;

22 }

23 @keyframes saltar {

24 0%, 100% { transform: translateY(0); }

25 50% { transform: translateY(-28px); }

26 }

27</style>

28</head>

29<body>

30 <h1 class="letras">

31 <span style="animation-delay: 0s">A</span>

32 <span style="animation-delay: 0.1s">N</span>

33 <span style="animation-delay: 0.2s">I</span>

34 <span style="animation-delay: 0.3s">M</span>

35 <span style="animation-delay: 0.4s">A</span>

36 <span style="animation-delay: 0.5s">Ç</span>

37 <span style="animation-delay: 0.6s">Ã</span>

38 <span style="animation-delay: 0.7s">O</span>

39 </h1>

40</body>

41</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 font-family: Arial, sans-serif;

15 }

16 .btn-brilho {

17 position: relative;

18 overflow: hidden;

19 padding: 16px 40px;

20 border: none;

21 border-radius: 12px;

22 background: linear-gradient(135deg, #3b82f6, #8b5cf6);

23 color: #fff;

24 font-size: 1.1rem;

25 font-weight: 700;

26 cursor: pointer;

27 }

28 .btn-brilho::after {

29 content: "";

30 position: absolute;

31 top: 0;

32 left: -80%;

33 width: 40%;

34 height: 100%;

35 background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);

36 transform: skewX(-20deg);

37 transition: left 0.6s ease;

38 }

39 .btn-brilho:hover::after {

40 left: 120%;

41 }

42</style>

43</head>

44<body>

45 <button class="btn-brilho">Passe o mouse</button>

46</body>

47</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 font-family: Arial, sans-serif;

15 }

16 .card-3d {

17 width: 260px;

18 padding: 32px;

19 border-radius: 16px;

20 background: linear-gradient(135deg, #f59e0b, #ef4444);

21 color: #fff;

22 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

23 transition: transform 0.3s ease, box-shadow 0.3s ease;

24 }

25 .card-3d h2 { margin: 0 0 8px; font-size: 1.4rem; }

26 .card-3d p { margin: 0; opacity: 0.9; font-size: 0.95rem; }

27 .card-3d:hover {

28 transform: perspective(800px) rotateX(10deg) rotateY(-10deg) translateY(-8px);

29 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);

30 }

31</style>

32</head>

33<body>

34 <div class="card-3d">

35 <h2>Título do Card</h2>

36 <p>Passe o mouse para ver o efeito 3D.</p>

37 </div>

38</body>

39</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 font-family: Arial, sans-serif;

15 }

16 .img-zoom {

17 width: 400px;

18 height: 300px;

19 overflow: hidden;

20 border-radius: 16px;

21 }

22 .img-zoom img {

23 width: 100%;

24 height: 100%;

25 object-fit: cover;

26 transition: transform 0.5s ease;

27 }

28 .img-zoom:hover img {

29 transform: scale(1.2);

30 }

31</style>

32</head>

33<body>

34 <div class="img-zoom">

35 <img src="https://picsum.photos/seed/animacao/400/300" alt="Imagem de exemplo" />

36 </div>

37</body>

38</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 }

15 .spinner {

16 width: 48px;

17 height: 48px;

18 border: 5px solid #e2e8f0;

19 border-top-color: #3b82f6;

20 border-radius: 50%;

21 animation: girar 0.9s linear infinite;

22 }

23 @keyframes girar {

24 to { transform: rotate(360deg); }

25 }

26</style>

27</head>

28<body>

29 <div class="spinner"></div>

30</body>

31</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 }

15 .pontos span {

16 display: inline-block;

17 width: 16px;

18 height: 16px;

19 margin: 0 4px;

20 background: #8b5cf6;

21 border-radius: 50%;

22 animation: pular 0.6s ease-in-out infinite;

23 }

24 .pontos span:nth-child(2) { animation-delay: 0.15s; }

25 .pontos span:nth-child(3) { animation-delay: 0.3s; }

26 @keyframes pular {

27 0%, 100% { transform: translateY(0); opacity: 0.6; }

28 50% { transform: translateY(-16px); opacity: 1; }

29 }

30</style>

31</head>

32<body>

33 <div class="pontos">

34 <span></span>

35 <span></span>

36 <span></span>

37 </div>

38</body>

39</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 }

15 .barra-progresso {

16 width: 260px;

17 height: 8px;

18 background: #e2e8f0;

19 border-radius: 99px;

20 overflow: hidden;

21 }

22 .barra-progresso span {

23 display: block;

24 width: 40%;

25 height: 100%;

26 background: linear-gradient(90deg, #3b82f6, #a855f7);

27 border-radius: 99px;

28 animation: deslizar 1.4s ease-in-out infinite;

29 }

30 @keyframes deslizar {

31 0% { transform: translateX(-100%); }

32 100% { transform: translateX(350%); }

33 }

34</style>

35</head>

36<body>

37 <div class="barra-progresso" role="progressbar" aria-label="Carregando">

38 <span></span>

39 </div>

40</body>

41</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 font-family: Arial, sans-serif;

15 }

16 .flip {

17 width: 220px;

18 height: 280px;

19 perspective: 1000px;

20 cursor: pointer;

21 }

22 .flip-inner {

23 position: relative;

24 width: 100%;

25 height: 100%;

26 transform-style: preserve-3d;

27 transition: transform 0.7s;

28 }

29 .flip:hover .flip-inner {

30 transform: rotateY(180deg);

31 }

32 .flip-frente,

33 .flip-verso {

34 position: absolute;

35 inset: 0;

36 display: flex;

37 align-items: center;

38 justify-content: center;

39 border-radius: 16px;

40 backface-visibility: hidden;

41 font-size: 1.5rem;

42 font-weight: 700;

43 color: #fff;

44 }

45 .flip-frente {

46 background: linear-gradient(135deg, #0ea5e9, #6366f1);

47 }

48 .flip-verso {

49 background: linear-gradient(135deg, #f43f5e, #a855f7);

50 transform: rotateY(180deg);

51 }

52</style>

53</head>

54<body>

55 <div class="flip">

56 <div class="flip-inner">

57 <div class="flip-frente">Frente</div>

58 <div class="flip-verso">Verso</div>

59 </div>

60 </div>

61</body>

62</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 font-family: Arial, sans-serif;

15 }

16 .flutuante {

17 width: 120px;

18 height: 120px;

19 display: flex;

20 align-items: center;

21 justify-content: center;

22 border-radius: 24px;

23 background: linear-gradient(135deg, #22c55e, #0ea5e9);

24 color: #fff;

25 font-weight: 700;

26 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);

27 animation: flutuar 3s ease-in-out infinite;

28 }

29 @keyframes flutuar {

30 0%, 100% { transform: translateY(0); }

31 50% { transform: translateY(-24px); }

32 }

33</style>

34</head>

35<body>

36 <div class="flutuante">Flutuar</div>

37</body>

38</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 }

15 .pulse {

16 width: 80px;

17 height: 80px;

18 border-radius: 50%;

19 background: #10b981;

20 animation: pulso 1.8s ease-out infinite;

21 }

22 @keyframes pulso {

23 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }

24 100% { box-shadow: 0 0 0 28px rgba(16, 185, 129, 0); }

25 }

26</style>

27</head>

28<body>

29 <div class="pulse"></div>

30</body>

31</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #000;

14 font-family: Arial, sans-serif;

15 }

16 .texto-neon {

17 font-size: 3rem;

18 font-weight: 900;

19 color: #22d3ee;

20 text-shadow:

21 0 0 5px rgba(34, 211, 238, 0.8),

22 0 0 15px rgba(34, 211, 238, 0.7),

23 0 0 30px rgba(34, 211, 238, 0.5);

24 animation: neon 2s ease-in-out infinite;

25 }

26 @keyframes neon {

27 0%, 100% { text-shadow: 0 0 5px rgba(34, 211, 238, 0.8), 0 0 15px rgba(34, 211, 238, 0.7), 0 0 30px rgba(34, 211, 238, 0.5); }

28 50% { text-shadow: 0 0 10px rgba(34, 211, 238, 1), 0 0 30px rgba(34, 211, 238, 0.9), 0 0 60px rgba(34, 211, 238, 0.7); }

29 }

30</style>

31</head>

32<body>

33 <h1 class="texto-neon">NEON</h1>

34</body>

35</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 font-family: Arial, sans-serif;

15 }

16 .link-animado {

17 position: relative;

18 text-decoration: none;

19 font-size: 1.6rem;

20 font-weight: 700;

21 color: #fbbf24;

22 }

23 .link-animado::after {

24 content: "";

25 position: absolute;

26 left: 0;

27 bottom: -4px;

28 width: 100%;

29 height: 3px;

30 background: #fbbf24;

31 border-radius: 3px;

32 transform: scaleX(0);

33 transform-origin: left;

34 transition: transform 0.4s ease;

35 }

36 .link-animado:hover::after {

37 transform: scaleX(1);

38 }

39</style>

40</head>

41<body>

42 <a class="link-animado" href="#">Passe o mouse</a>

43</body>

44</html>

1<!DOCTYPE html>

2<html lang="pt-BR">

3<head>

4<meta charset="UTF-8">

5<meta name="viewport" content="width=device-width, initial-scale=1.0">

6<style>

7 body {

8 margin: 0;

9 height: 100vh;

10 display: flex;

11 align-items: center;

12 justify-content: center;

13 background: #0f172a;

14 }

15 .skeleton {

16 position: relative;

17 overflow: hidden;

18 width: 300px;

19 height: 120px;

20 border-radius: 16px;

21 background: #1e293b;

22 }

23 .skeleton::after {

24 content: "";

25 position: absolute;

26 inset: 0;

27 transform: translateX(-100%);

28 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);

29 animation: shimmer 1.6s infinite;

30 }

31 @keyframes shimmer {

32 100% { transform: translateX(100%); }

33 }

34</style>

35</head>

36<body>

37 <div class="skeleton"></div>

38</body>

39</html>