Profil et notification animés CSS

357 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

2 July 2025

Formulaire de connexion CSS

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

Profil et notification animés CSS

Recommandé

Un code de Mete

Effet de survol de bouton CSS

Formulaire de connexion CSS

HTML

CSS

JS

Recommandé

Un code de Mete

Effet de survol de bouton CSS

Formulaire de connexion CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS