Exemple de calques d'animation CSS

45 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 August 2024

Bouton avec effet de survol animé de Dracula

10 December 2024

Un code par sofiane.blida09

HTML

CSS

/* css_foundation block */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

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

.codigo {
      position: absolute;
      top: 15%;
      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%;
      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; }

.animacao {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 400px;
      overflow: hidden;
    }

.camada {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      animation: animar-circulos 4s ease-out;
      animation-fill-mode: forwards;
    }

.camada-1 {
      top: 20%;
      left: 60%;
      animation-delay: .5s;
    }

.camada-2 {
      top: 60%;
      left: 10%;
      transform: scale(0.5);
      animation-delay: 1s;
    }

.camada-3 {
      top: 20%;
      left: 20%;
      transform: rotate(45deg);
      animation-delay: .5s;
    }

/* Camada com animação de transição */
    .transicao {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      animation: animar-transicao 4s ease-out;
      animation-fill-mode: forwards;
    }

.transicao-1 {
      top: 40%;
      left: 5%;
      animation-delay: 1s;
    }

.transicao-2 {
      top: 60%;
      left: 50%;
      transform: scale(0.5);
      animation-delay: 1.5s;
    }

.camada:hover { cursor: pointer }

/* CSS da animação */
    @keyframes animar-circulos {
      100% {
        transform: translateX(300%) rotate(180deg);
        opacity: 0;
      }
    }

@keyframes animar-transicao {
      0% {
        transform: translateX(-200%) scale(1);
        opacity: 1;
      }
      100% {
        transform: translateX(200%) scale(4);
        opacity: 0;
      }
    }

Exemple de calques d'animation CSS

Recommandé

Bouton avec effet de survol animé de Dracula

Un code par agilecloud61

Un code par sofiane.blida09

HTML

CSS

JS

Recommandé

Bouton avec effet de survol animé de Dracula

Un code par agilecloud61

Un code par sofiane.blida09

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS