Extrait HTML d'animation de porte de salle CSS

1,372 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Extrait HTML d'animation de porte de salle CSS

Recommandé

13 September 2025

Animation de la barre de chargement CSS HTML

28 September 2025

Animation de chargement CSS : Ellipse Loader

3 January 2025

Un code par adonis1887

HTML

CSS

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

body {
        background-color: #141821;
        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: 50%;
        width: 100%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }

.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .function       { color: #A6E22E; }
      .animation-container {
        position: absolute;
        top: 75%;
        left: 75%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50%;
        overflow: hidden;
      }

.room {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 10px;
        background: linear-gradient(to bottom, #222, #333);
        border-radius: 10px;
        opacity: 0;
        pointer-events: none;
        animation: roomLoop 10s infinite ease-in-out;
      }

.shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0 90%);
        animation: shadowPulse 5s linear infinite;
      }

.door {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        background-color: rgba(0, 255, 0, 0.5);
        animation: doorSwing 8s cubic-bezier(0.2, 0.8, 0.8, 1) infinite;
      }

@keyframes roomLoop {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
      }

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

@keyframes doorSwing {
        0% {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(45deg);
        }
        100% {
          transform: rotate(0deg);
        }
      }

.animation-container {
        /* The next lines will take on the added animation as well */
        .room:nth-child(1) {
          animation-delay: 0s;
          /* Your code regarding .room animation */
          /* */
          /* 
          // Example setting the initial state
         /* */
          opacity: 1;
        }