एनिमेशन का अंश

अनुशंसित

20 March 2024

एनिमेशन के साथ HTML लैंडिंग पेज टेम्पलेट

10 September 2024

* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #042104;
    animation: animateBgColor 4s linear infinite;
}
.loader{
    position: relative;
}
.loader span{
    position: absolute;
    top: 0;
    left: -200px;
    width: 200px;
    transform-origin: right;
    transform: rotate(calc(18deg * var(--i)));
}
.loader span::before{
    content: '';
    position: absolute;
    left: 0;
    width: 150px;
    height: 15px;
    background: hsl(0, 100%, 50%);
    border-radius: 50%;
    animation: animate 5s linear infinite;
    animation-delay: calc(-0.1s * var(--i));
    box-shadow: 0 0 20px #00ff0a,
                0 0 40px #00ff0a,
                0 0 60px #00ff0a,
                0 0 80px #00ff0a,
                0 0 100px #00ff0a,
                0 0 120px #00ff0a;
}

@keyframes animate{
    0%
    {
        transform: translateX(0) scale(0.5);
    }
    50%
    {
       transform: translateX(200px) scale(1);  
    }
    100%
    {
        transform: translateX(0) scale(0.5); 
    }    
}

एनिमेशन का अंश

अनुशंसित

एनिमेशन के साथ HTML लैंडिंग पेज टेम्पलेट

ग्लासमोर्फिज्म उत्पाद कार्ड

कार निर्देशिकाएँ

HTML

CSS

JS

अनुशंसित

एनिमेशन के साथ HTML लैंडिंग पेज टेम्पलेट

ग्लासमोर्फिज्म उत्पाद कार्ड

कार निर्देशिकाएँ

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS