Extrait HTML d'animation de porte de salle CSS

1,100 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Extrait HTML d'animation de porte de salle CSS

Recommandé

30 November 2024

Erreur de mot de passe rebondissant

4 December 2024

Un code par fastcloud893

5 May 2024

Modèle HTML de menu de restaurant

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