Fragmento HTML de animação de porta de sala CSS

826 byby.createsite

Abrir no Editor Video Publique Seu Código

Fragmento HTML de animação de porta de sala CSS

Recomendado

10 July 2025

Modelo de cardápio de restaurante em HTML

8 July 2025

TheDoc's - Sistema moderno de login e registro

20 June 2025

Cartões de links de mídia social HTML

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

Recomendado

Modelo de cardápio de restaurante em HTML

TheDoc's - Sistema moderno de login e registro

Cartões de links de mídia social HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS