LIght Effect On Social Icon

2,017 alejandrokundrah

Open In Editor Publish Your Code

LIght Effect On Social Icon

Recommended

19 November 2024

Home Digital Clock

29 December 2025

Page 404 error en Français

17 May 2025

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

JS