Exemple d'animation CSS : chargement et effets de texte

563 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Exemple d'animation CSS : chargement et effets de texte

Recommandé

7 December 2024

Page de destination d'une agence de marketing numérique

23 March 2025

Un code par solosimbaa86

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

Exemple d'animation CSS : chargement et effets de texte

Recommandé

Un code par securecode394

Page de destination d'une agence de marketing numérique

Un code par solosimbaa86

HTML

CSS

JS

Recommandé

Un code par securecode394

Page de destination d'une agence de marketing numérique

Un code par solosimbaa86

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS