Conteneur d'effets de lumière HTML avec CSS

587 ismaeltaybi

Ouvrir dans l'éditeur Publiez votre code

Conteneur d'effets de lumière HTML avec CSS

Recommandé

15 July 2025

Animation de basculement de triangle CSS

30 May 2025

Codage manuel de la page de connexion Facebook

26 December 2024

Un code par logicalarray833

HTML

CSS

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #292828;
    animation: colorchanger 4s linear infinite;
}

@keyframes colorchanger {
    0%, 100% {
        filter: hue-rotate(270deg);
    }
    50% {
        filter: hue-rotate(360deg);
    }
}

.container {
    position: relative;
    width: 400px;
    height: 100px;
    transform-style: preserve-3d;
    animation: anim 4s linear infinite;
}

@keyframes anim {
    0% {
        transform: rotateX(-30deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-30deg) rotateY(360deg);
    }
}

.container .box {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.container .box span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(21, 21, 25, 1), rgba(255, 6, 6, 1));
    transform-style: preserve-3d;
    transform: rotateY(calc(90deg * var(--i))) translateZ(200px);
}

.top {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    background: #222;
    transform-style: preserve-3d;
    transform:  rotateX(90deg) translateZ(200px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.top::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    background-color: rgba(255, 6, 6, 1);
    transform: translateZ(-250px);
    opacity: 0.75;
    box-shadow: 0 0 120px rgba(255, 6, 6, 0.2),
    0 0 200px rgba(255, 6, 6, 0.4),
    0 0 300px rgba(255, 6, 6, 0.6),
    0 0 400px rgba(255, 6, 6, 0.8),
    0 0 500px rgba(255, 6, 6, 1);
}

.icon {
    position: absolute;
    font-size: 15em;
    color: rgba(255, 6, 6, 1);
    text-shadow: 0 0 50px rgba(255, 6, 6, 0.25),
    0 0 100px rgba(255, 6, 6, 0.5),
    0 0 200px rgba(255, 6, 6, 0.75),
    0 0 300px rgba(255, 6,6,1);
}

.icon:hover{
    transform: scale(1.1);
}

Recommandé

Animation de basculement de triangle CSS

Codage manuel de la page de connexion Facebook

Un code par logicalarray833

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS