CSS Sprite Animasyon Oluşturucu
Birden çok görüntüden veya sprite sayfasından
otomatik olarak CSS animasyon kodu oluşturun
📏 Izgara Ayarları
⚙️ Animasyon Ayarları
🎞️ Kare Sırası
Sıralamak için sürükleyinBunu da beğenebilirsiniz
Sprite Animasyon Oluşturucu Hakkında
CSS Sprite Animasyon Oluşturucu, mevcut bir sprite sayfasından veya birden çok kareden animation özelliği ve steps() işlevini kullanarak otomatik olarak CSS animasyon kodu üreten ücretsiz bir araçtır.
GIF animasyonlarının aksine, CSS spriteları görüntü bozulması olmadan yüksek kalite sunar. CSS üzerinden oynatma hızını ve yönünü esnek bir şekilde kontrol edebilirsiniz.
Görüntü yükleme işleminden CSS oluşturmaya kadar her şey tamamen tarayıcınızda gerçekleştirilir. Görüntüleriniz asla bir sunucuya gönderilmez.
CSS Sprite Animasyonu Nasıl Yapılır
Resim Yükle
Mevcut bir sprite sayfasını veya birden fazla resmi tek bir sayfada birleştirmek için yükleyin.
Animasyonu Ayarla
Sütunları, satırları, oynatma hızını ve yönünü ayarlayarak canlı önizlemeyi izleyin.
Kodu Al
Oluşturulan görüntüyü indirin ve sağlanan CSS/HTML kodunu projenize kopyalayın.
CSS Özellikleri Açıklandı
CSS animation + steps() Nasıl Çalışır
steps() işlevi, CSS'te değerleri yumuşak geçişler yerine ayrık adımlarla değiştirmeye yarar.
Sprite animasyonunda, bu özellik background-position'ı kare genişliği kadar anında kaydırarak kullanılır.
| Özellik | Açıklama | Sprite'taki Rolü |
|---|---|---|
| animation-timing-function | Animasyonun ilerleme eğrisi | steps(N) pürüzsüz geçişleri engeller. |
| background-position | Arkaplanın konumu | Kareleri göstermek için değiştirilir. |
| animation-duration | Bir döngü süresi | Hızı (FPS) belirler. |
Animasyon Sözlüğü
- Sprite Sayfası (Sprite Sheet)
- Birden çok küçük resmi içeren tek bir büyük resim.
- steps() İşlevi
- Değerleri pürüzsüz değil, ayrık adımlarla değiştiren CSS işlevi.
- @keyframes
- Animasyon boyunca ara durumları tanımlayan CSS kuralı.
- background-position
- Arkaplan görüntüsünün başlangıç konumunu belirtir.
- Alfa Kanalı
- Görüntü şeffaflığı. PNG kullanımı ile pürüzsüz yarı saydamlık sağlar.
Sıkça Sorulan Sorular
- S.Resimlerim sunucuya kaydediliyor mu?
- Hayır. Tüm işlemler tarayıcınızda yapılır, bu nedenle gizli resimler için güvenlidir.
- S.GIF animasyonları ile CSS spriteları arasındaki fark nedir?
- GIF'lerin 256 renk sınırı vardır. CSS spriteları yüksek kalite (PNG) sunar ve CSS üzerinden esnek kontrol sağlar.
- S.Farklı boyutlardaki resimleri birleştirebilir miyim?
- Önerilmez. Tüm karelerin aynı boyutlara sahip olması gerekir.
- S.Retina ekranlarda bulanıklığı nasıl düzeltirim?
- Sprite sayfanızı iki kat çözünürlükte oluşturun ve
background-sizeile küçültün. - S.Önerilen maksimum boyut var mı?
- Özellikle mobil cihazlarda bellek aşımını önlemek için boyutları 2048x2048'in altında tutmanızı öneririz.
Kullanım Durumları
Yükleme Animasyonları
Yarı saydam tasarıma sahip, CSS ile verimli çalışan yükleme spinner'ları için idealdir.
Karakter Hareketi
Oyunlar için karakter hareket döngüleri (yürüme vb.) oluşturun.
Etkileşimli Arayüz İkonları
Vurgulama üzerine tetiklenen dinamik ikon animasyonları oluşturun.
Banner Reklamları
Büyük dosya boyutu olmadan yüksek kaliteli animasyonlu bannerlar tasarlayın.
Geri Bildirim Gönder
Aracı geliştirmemize yardımcı olmak için lütfen düşüncelerinizi bize bildirin.
Geri bildirim geçici olarak askıya alındı
Sunucu meşgul veya spam koruması etkin. Lütfen daha sonra tekrar deneyin.