Esempio di animazione CSS: caricamento ed effetti di testo

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

10 February 2025

Esempio di pulsante HTML di base

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;
  }
}

Esempio di animazione CSS: caricamento ed effetti di testo

Consigliato

Un codice di bachir123

Un codice di ytr3d3

Esempio di pulsante HTML di base

HTML

CSS

JS

Consigliato

Un codice di bachir123

Un codice di ytr3d3

Esempio di pulsante HTML di base

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS