Profilo animato CSS e notifica

362 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

17 July 2025

Modulo di registrazione per l'accesso con rotazione 3D HTML CSS

26 May 2025

Un codice di ytr3d3

HTML

CSS

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

body {
    background-color: #1F2434;
    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: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background: transparent;
}

.animation-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath opacity='0.1' fill='none' stroke='%23c0df9e' stroke-width='10' d='M0 0 L100 0 L100 100 L0 100 Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center / cover;
    animation: scroll-warp 10s linear infinite; 
}

@keyframes scroll-warp {
  0% { transform: translateY(-50%) translateX(-50%) scale(1); }
  50% { transform: translateY(0) translateX(0) scale(1.1); }
  100% { transform: translateY(50%) translateX(50%) scale(1); }
}

Profilo animato CSS e notifica

Consigliato

Modulo di registrazione per l'accesso con rotazione 3D HTML CSS

Un codice di Metehan

Un codice di ytr3d3

HTML

CSS

JS

Consigliato

Modulo di registrazione per l'accesso con rotazione 3D HTML CSS

Un codice di Metehan

Un codice di ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS