CSS के साथ HTML लाइट इफ़ेक्ट कंटेनर

584 ismaeltaybi

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

19 October 2024

HTML और CSS का उपयोग करके वेबसाइट डिज़ाइन

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

CSS के साथ HTML लाइट इफ़ेक्ट कंटेनर

अनुशंसित

एनिमेटेड HTML लॉगिन फ़ॉर्म

CSS एनीमेशन कंटेनर उदाहरण

HTML और CSS का उपयोग करके वेबसाइट डिज़ाइन

HTML

CSS

JS

अनुशंसित

एनिमेटेड HTML लॉगिन फ़ॉर्म

CSS एनीमेशन कंटेनर उदाहरण

HTML और CSS का उपयोग करके वेबसाइट डिज़ाइन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS