Webleb - Extraits de Code - Extrait HTML d'animation de porte de salle CSS

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

Extrait HTML d'animation de porte de salle CSS

Recommandé

Un code par andres.stahr

Un code de Metehan

Commentaire d'espace réservé au code HTML

HTML

CSS

JS

Recommandé

Un code par andres.stahr

Un code de Metehan

Commentaire d'espace réservé au code HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS