Exemplo de animação CSS: carregamento e efeitos de texto

926 byby.createsite

Abrir no Editor Video Publique Seu Código

Exemplo de animação CSS: carregamento e efeitos de texto

Recomendado

13 December 2025

Código WebGL HTML Canvas do Super Mario 64

5 December 2024

Lista de tarefas inteligente

HTML

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <style>
        /* Fundação CSS */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background:url("https://vinixodin.com/thumb.jpg") no-repeat center center;
            background-color: black;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

/* Código snippet */
        .codigo {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #272822;
            color: #F8F8F2;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 18px;
            padding: 20px;
            border-radius: 8px;
            white-space: pre-line;
            text-align: left;
            line-height: 1.6;
            max-height: 25%;
            max-width: 75%;
            width: 75%;
            height: 25%;
            top:15%;
            overflow-y: hidden;
            box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
        }

.selector       { color: #F92672; }
        .property       { color: #66D9EF; }
        .value-number   { color: #AE81FF; }
        .value-string   { color: #E6DB74; }
        .value-color    { color: #A6E22E; }
        .function       { color: #A6E22E; }

/* Exemplo de elemento de código */
        .loading-element {
            border-radius: 50%;
            animation: loading-animation 1s linear infinite;
        }

/* Contêiner da animação */
        .animation-container {
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 50%;
            overflow: hidden;
            background: transparent;
        }

/* Camadas da animação */
        .animation-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(90deg, #00b6a9, #00a1c1);
            animation: ripple 2s forwards;
            opacity: 0;
        }

@keyframes ripple {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            100% {
                opacity: 1;
                transform: scale(1.5);
            }
        }

/* Elemento de texto animado */
        .animation-container::first-child {
            font-size: 48px;
            font-weight: bold;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            padding: 20px;
            animation: fade-in 1s forwards;
        }

@keyframes fade-in {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

/* Elementos do fundo da animação */
        .animation-container::nth-child(3) {
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.2);
            animation: slide-in 2s infinite;
        }

.animation-container::nth-child(4) {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background-color: rgba(255, 255, 255, 0.3);
            animation: slide-in 2s infinite;
        }

@keyframes slide-in {
            0% {
                transform: translateX(-100%);
            }
            50% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(100%);
            }
        }

/* Elementos que apenas aparecem na segunda execução da animação */
        .animation-container::nth-child(5) {
            position: absolute;
            top: 50%;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: rgba(255, 0, 0, 0.5);
            animation: pulse 1s infinite;
            opacity: 0;
        }

@keyframes pulse {
            0% {
                background-color: rgba(255, 0, 0, 0);
            }
            50% {
                background-color: rgba(255, 0, 0, 0.5);
            }
            100% {
                background-color: rgba(255, 0, 0, 0);
            }
        }

.animation-container::nth-child(6) {
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 20px;
            background-color: rgba(0, 255, 0, 0.5);
            animation: shift 1s infinite;
        }

@keyframes shift {
            0% {
                transform: translateX(-100%);
            }
            50% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(100%);
            }
        }

/* Controle de layout na execução da animação */
        .animation-container::nth-child(7) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 255, 0.2);
            animation: rotate 2s infinite;
        }

@keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(360deg);
            }
            100% {
                transform: rotate(720deg);
            }
        }

/* Adicionando um micro-detale que apenas aparece na segunda execução da animação */
        .animation-container::nth-child(8) {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            animation: blink 1s infinite;
            opacity: 0;
        }

@keyframes blink {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

/* Adicionando um micro-detale que apenas aparece na segunda execução da animação */
        .animation-container::nth-child(9) {
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%);
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.5);
            animation: pulse 1s infinite;
            opacity: 0;
        }

@keyframes pulse {
            0% {
                background-color: rgba(255, 255, 255, 0);
            }
            50% {
                background-color: rgba(255, 255, 255, 0.5);
            }
            100% {
                background-color: rgba(255, 255, 255, 0);
            }
        }

/* Adicionando um micro-detale que apenas aparece na segunda execução da animação */
        .animation-container::nth-child(10) {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: rgba(0, 255, 255, 0.5);
            animation: shift 1s infinite;
            opacity: 0;
        }

/* Definindo as animações principais do exemplo */
        @keyframes loading-animation {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1);
            }
            100% {
                transform: scale(0);
            }
        }

.animation-container::nth-child(11) {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: rgba(255, 0, 0, 0.5);
            animation: pulse 1s infinite;
            opacity: 0;
        }

.animation-container::nth-child(12) {
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: rgba(0, 255, 0, 0.5);
            animation: shift 1s infinite;
            opacity: 0;
        }

/* Código snippet */

</style>
</head>
<body>
    <div class="animation-container">
        <div class="animation-container::before"></div>
        <div class="animation-container::first-child">EXEMPLO DE TEXTO ANIMADO</div>
        <div class="animation-container::nth-child(3)"></div>
        <div class="animation-container::nth-child(4)"></div>
        <div class="animation-container::nth-child(5)"></div>
        <div class="animation-container::nth-child(6)"></div>
        <div class="animation-container::nth-child(7)"></div>
        <div class="animation-container::nth-child(8)"></div>
        <div class="animation-container::nth-child(9)"></div>
        <div class="animation-container::nth-child(10)"></div>
        <div class="animation-container::nth-child(11)"></div>
        <div class="animation-container::nth-child(12)"></div>
    </div>
</body>
</html>
```

CSS

/* 
  Base foundation
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background:url("./thumb.jpg") no-repeat center center;
  background-color: black;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  aspect-ratio: 9/16;
}

.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 25%;
  max-width: 75%;
  width: 75%;
  height: 25%;
  top:15%;
  overflow-y: hidden;
  box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
}

.selector       { color: #F92672; }
.property       { color: #66D9EF; }
.value-number   { color: #AE81FF; }
.value-string   { color: #E6DB74; }
.value-color    { color: #A6E22E; }
.function       { color: #A6E22E; }

.animation-container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: transparent;
  aspect-ratio: 9/16;
}

/* 
  Layers e motivação emocional
*/
.loading-element {
  background-color: #333333;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  animation: loading-animation 1s linear infinite;
  position: relative;
}

@keyframes loading-animation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.layer1 {
  width: 100%;
  height: 100%;
  background-color: #4D4D4D;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

.layer1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #3F3F3F;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* 
  Micro-detalhes para o replay value
*/
.layer2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3F3F3F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: detalhe 2s linear infinite;
}

@keyframes detalhe {
  50% {
    transform: scale(1);
    background-color: #666666;
  }
  100% {
    transform: scale(0);
    background-color: #3F3F3F;
  }
}

/* 
  Interações entre camadas e elementos
*/
.layer3 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #2F2F2F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: interacao 2s linear infinite;
}

@keyframes interacao {
  50% {
    transform: scale(1);
    background-color: #777777;
  }
  100% {
    transform: scale(0);
    background-color: #2F2F2F;
  }
}

Exemplo de animação CSS: carregamento e efeitos de texto

Recomendado

Código WebGL HTML Canvas do Super Mario 64

Um código por logicalcode2

Lista de tarefas inteligente

HTML

CSS

JS

Recomendado

Código WebGL HTML Canvas do Super Mario 64

Um código por logicalcode2

Lista de tarefas inteligente

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS