Frammento HTML di animazione della porta della stanza CSS

951 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Frammento HTML di animazione della porta della stanza CSS

Consigliato

12 December 2025

Ninja della frutta

20 September 2025

Modello HTML per portfolio sviluppatori

19 September 2025

Esempi di menu a discesa CSS animati

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

Consigliato

Ninja della frutta

Modello HTML per portfolio sviluppatori

Esempi di menu a discesa CSS animati

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS