Efeito de luz no ícone social

1559 alejandrokundrah

Abrir no Editor Publique Seu Código

Recomendado

8 February 2025

Desfoque progressivo modal

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

Efeito de luz no ícone social

Recomendado

Jogo da cobra

Baldi's Basics

Desfoque progressivo modal

HTML

CSS

JS

Recomendado

Jogo da cobra

Baldi's Basics

Desfoque progressivo modal

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS