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

अनुशंसित

10 April 2025

* 
{
    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

CSS

JS

अनुशंसित

डैनियल का ब्लॉग वेबसाइट

शुद्ध सीएसएस बाइक कार्ड

स्काईरियम द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS