 Sayfanın ortasında yanıp sönen bir daire görüntüleyen HTML kodunu yazın. Nabız atarak, periyodik olarak uzayan ve kasılan kastediyorum.
İşte CSS animasyonunu kullanarak sayfanın ortasında atımlı bir daire görüntüleyen örnek bir HTML kodu: ``` <!DOCTYPE html> <html> <head> <style> .circle { width: 50px; yükseklik: 50 piksel; arka plan rengi: #4CAF50; sınır yarıçapı: %50; animasyon: darbe 1,5 saniye sonsuz; } @keyframes pulse { 0% { transform: ölçek(1); } %50 { dönüşüm: ölçek(1.2); } %100 { dönüşüm: ölçek(1); } } .center { ekran: esnek; haklı içerik: merkez; hizalama öğeleri: merkez; yükseklik: 100vh; } </style> </head> <body> <div class="center"> <div class="circle"></div> </div> </body> </html> ``` Bu kodda snippet'te, darbeli daireyi temsil eden bir "daire" sınıfına sahip bir div öğesi oluşturduk. Bir daire oluşturmak için yüksekliğini, genişliğini, arka plan rengini ve sınır yarıçapını ayarlamak için CSS kullandık. Ardından, daireyi orijinal boyutunun 1,2 katına kadar ölçeklendiren ve ardından orijinal boyutuna geri döndüren "pulse" adlı bir CSS anahtar kare animasyonu tanımladık. Animasyon süresini 1.5 saniye olarak belirledik ve "infinite" anahtar kelimesini kullanarak "infinitely" çalışacak şekilde ayarladık. Son olarak, "center" sınıfına sahip başka bir div öğesi oluşturduk ve daire div öğesini sayfanın ortasında yatay ve dikey olarak ortalamak için CSS "flexbox" kullandık.