CSS ile Sayaç Yapımı

css-sayac-counter

CSS ile geri sayım ( Sayaç – Counter ) yapmak, JavaScript kullanmadan basit ve zarif bir yöntemdir. Bu yöntem, animasyonlar ve @keyframes kuralı ile zamanın geriye doğru akmasını sağlayarak görsel bir geri sayım oluşturur.

Sayaç konusunda küçük bir örnek hazırladım. Örneği şuradan inceleyebilirisiniz. CSS Counter (codepen.io)

Gerekli kodları aşağıda paylaşıyorum.

CSS

body::after{
    content: counter(_MyCounter);
    font-size: 28em;
    color:white;
}

@keyframes countdown {
    20%{
        counter-increment: _MyCounter -1;
    }
    40%{
        counter-increment: _MyCounter -2;
    }
    60%{
        counter-increment: _MyCounter -3;
    }
    80%{
        counter-increment: _MyCounter -4;
    }
    100%{
        counter-increment: _MyCounter -5;
    }
}

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


The reCAPTCHA verification period has expired. Please reload the page.

Back To Top