Profil et notification animés CSS

646 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 November 2025

Metehan

15 October 2025

Animation de chargement CSS Structure HTML

28 August 2025

Archinova : Atelier d'architecture et de design | Turquie

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

Recommandé

Metehan

Animation de chargement CSS Structure HTML

Archinova : Atelier d'architecture et de design | Turquie

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS