Exemple d'animation de réflexion CSS

712 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

21 October 2025

Exemple de modèle HTML de base

13 January 2026

Modèle HTML de jeu Unity WebGL Swordfight

22 July 2025

Icône de chargement CSS Spinner

HTML

CSS

/* Defina a base do CSS */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

body {
   
    background-color: black;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
  }

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

/* Animação de refletos quebrados */
  .refletos {
    position: relative;
    width: 20%;
    height: 20%;
  }

.refleto1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50% 0 0 50%;
  }

.refleto2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0 50% 50% 0;
  }

.refleto3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50% 50% 0 0;
  }

.refleto4 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0 0 0 50%;
  }

.refleto1, .refleto2, .refleto3, .refleto4 {
    animation: break-reflect 2s infinite;
  }

@keyframes break-reflect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

/* Animação de código */
  .codigo-container {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #282828;
    color: #F8F8F2;
    padding: 20px;
    border-radius: 8px;
    white-space: pre-line;
    text-align: left;
    line-height: 1.6;
    max-height: 50%;
    max-width: 50%;
    width: 50%;
    height: 50%;
    top: 25%;
    overflow-y: hidden;
  }

.codigo-container .codigo {
    font-size: 12px;
  }

.codigo-container .selector {
    color: #F92672;  
  }

.codigo-container .property {  
    color: #66D9EF;
  }

.codigo-container .value-number {  
    color: #AE81FF;
  }

.codigo-container .value-string {  
    color: #E6DB74;
  }

/* Animação de código quebrado */
  .codigo-fragment {
    position: relative;
    width: 50%;
    height: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
  }

.fragment1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50% 0 0 50%;
  }

.fragment2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0 50% 50% 0;
  }

@keyframes break-fragment {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

.fragment1, .fragment2 {
    animation: break-fragment 2s infinite;
  }

.fragment1, .fragment2{
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }

Recommandé

Exemple de modèle HTML de base

Modèle HTML de jeu Unity WebGL Swordfight

Icône de chargement CSS Spinner

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS