Konuyu bilenlerin CSS ne alaka rastgele sayı üretmek ne alaka diye söylendiklerinin farkındayım ama internette bir makalede bir uygulamayı görünce acaba css rastgele sayı üretebilir mi diye ben de merak ettim, sonuç ise şu şekilde:
gif formatında kaydettiğim html çıktısını oluşturmak için ise ufak bir afacanlık yapmışlar. Rastgele sayılar tam olarak css ile üretiliyor sayılmaz ama bir takım sayıları rastgeleleştirme ya da rastgele gibi gösterme konusunda bence yaratıcı bir çalışma. Html içerisinde önceden yerleştirilmiş bir grup sayının bir animasyon ile oynatılması ile yukarıdaki efekt verilmiş. html yapısı şu şekilde:
<div>
<div>6465465454654649846516165609049545109809810351064065321653410
531540654132065465103465646546545465464984651616560904954510980981
035106406532165341053154065413206546510346564654654546546498465161
656090495451098098103510640653216534105315406541320646530465051064
065321653410531540654132064653046553410531540654132065465103465646
546545465464984651616560904954510980981035106406532165341053154065
413206465304650510640653216534105315406541320646530465</div>
</div>
CSS Kodu:
$sayi: 10;
body > div {
font-size: 50px;
width: $sayi + ch;
overflow: hidden;
color:#ff7200
}
div div {
animation: rastgeleUret (300 / $sayi / 15) + s steps(300 / $sayi) infinite;
}
@keyframes rastgeleUret {
100% { transform: translateX(-300 / $sayi * 100%); }
}