Atölye › Trafik lambası › 11/12. adım

Hız için tek ayar

Ne yapıyoruz

Son adım: turun süresini bir CSS değişkenine koyuyoruz. Böylece lambanın hızını tek bir değeri değiştirerek ayarlayabilirsin. Programcılar bir değeri tek yerde tutmayı sever: değiştirmek kolay, unutmak zor.

```css
:root {
  --round: 6s;
}

animation: glow var(--round) infinite;
```

Ne işe yarıyor

• :root { → sayfanın kökü, yani en dış öğe. Burada tanımlanan değişken her yerden okunur.
• --round: 6s; → CSS değişkenlerinin adı -- ile başlar. Değeri 6 saniye.
• var(--round) → "değişkenin değerini buraya koy". animation satırında 6s yerine yazıyoruz.

Sıra sende

1. body kuralının altına :root kuralını yaz.
2. .lamp kuralındaki animation satırında 6s yerine var(--round) yaz.
3. Çalıştır. Sonra --round'u 3s yap: lamba iki kat hızlanır. Trafik lamban hazır!

Beceriler: CSS ile görünüm

← Sırayla Kendin yap: direk →

Tüm adımlar

1. Boş bir kutu
2. Kutuya biçim ver
3. İçine üç lamba
4. Yuvarlak lambalar
5. Ortada alt alta diz
6. Kırmızı, sarı, yeşil
7. Söndür
8. Bir lamba için zaman çizelgesi
9. Çizelgeyi oynat
10. Sırayla
11. Hız için tek ayar
12. Kendin yap: direk