Animasyonlu CSS Sanatı oluşturun

Feb 3, 2026

Nasıl Yapılır

(Görüntü Kredi: Tiffany Choong)

CSS görüntüleri oluşturmak, becerilerinizi pratik etmenin ve temiz bir sanat eseri yaratmanın eğlenceli bir yoludur. Web bileşenlerinin normal günlük günden güne stilinden hoş bir mola. Başlamak için ihtiyacınız olan tek şey boş bir belge ve bir CSS dosyasıdır; Stillerinizi yeniden kullanmanıza ve daha basit seçicileri yazmanızı sağlayacak olan SASS kullanmanızı öneririz ( Sass nedir? Bu ön işlemci hakkında daha fazla bilgi edinmek için).

CSS sanatını ustalaşmak için bazı en iyi ipuçlarıyla başlayacağız, ardından bu animasyonlu balon pikachu'yu yalnızca CSS kullanarak nasıl yeniden yaratacağınızı göstereceğiz (dosyalarınızı iyi durumda tuttuğunuzdan emin olun Bulut depolama ).

Daha fazla ilham almak için, şaşırtıcı yuvarlamamızı keşfedin CSS animasyon örnekleri . Daha basit bir şeyden sonra? Öğrenerek başla CSS kullanarak bir buz lolly nasıl oluşturulur .

Veya, yeni bir siteye başlıyorsanız, karmaşıklığı parlak bir şekilde hendeklendirin. Web Sitesi Oluşturucu ve elde ettiğinizden emin olun ağ sağlayıcısı yerinde.

Tasarımı basit şekillere düşürün

CSS sanatı oluştururken, ilham için birkaç referans görüntüsüne bakmanıza yardımcı olabilir ve ardından devam ederken basitleştirilmiş bir çizgi film varyasyonu oluşturabilir, daha iyi yapan ilkel şekilleri kullanarak konuyu öngörmektedir. CSS şekilleri .

Konumlandırmaya yardımcı olmak için parlak bir arka plan kullanın.

Benzer renkteki şekilleri üst üste bindiğinde, nereye yerleştirildiklerini ya da neye benzediklerini görmek zordur. Çalıştığınız şeklin, değiştirerek durması yararlıdır. arka plan rengi Macenta gibi parlak ve neşeli bir şeye. Bu, elemanınızın tam konumunu ve şeklini kolayca görmenizi sağlar.

Sıvı boyutlarını kullanın

Özellikler için bir PX değerini tanımlamaya gelince, REM birimini kullanmanızı tavsiye ederiz. Genel parçanızın daha büyük veya daha küçük olmasını istediğinize karar verirseniz, REM birimlerini kullanarak sadece tabanını değiştirmek zorundasınız. html {font boyutu: ... px} SASS'nizde tüm resmi yukarı veya aşağı ölçeklendirmek için.

Ebeveyne göreceli boyutlandırma olması gereken çocuk elemanlarının yüksekliklerini ve genişliğini tanımlarken, yüzdeler kullanışlıdır. Bu değerler her zaman ebeveynlerine göre olduğundan, aynı zamanda HTML yazı tipi boyutu .

Generate CSS — CSS oluşturma, yaratıcı bloq, net ve web tasarımcısı tarafından size verilen ısmarlama bir konferanstır. Erken Kuş Biletinizi ayırtmak için tıklayın! (Görüntü Kredi: Getty / Gelecek)

01. Konteynerlerle başlayın

Yapıtın parçalarını tutmak için bir sarmalayıcı kabı başlamak için iyi bir yerdir. Kabın içinde, üç iç kap yerleştirebiliriz - kafa, gövde ve balonlar.

 & lt; div class = "konteyner" & gt;
& lt; div sınıf = "kafa" & gt; / div & gt;
& lt; div sınıf = "vücut" & gt; / div & gt;
& lt; div sınıf = "balonlar" & gt; & lt; / div & gt;
& lt; / div & gt;

Konteyner genellikle olmalıdır Konum: Göreceli Diğer elemanların içinde nispeten bir şekilde yerleştirilmesine izin vermek Pozisyon: Mutlak ve iyi tanımlanmış bir yüksekliğe ve genişliğe sahip, aksi halde çocuk elemanlarının konumlandırılması zorlaşır.

Stillerinizde, taban renklerinizi tekrar kullanılabilirlik için SASS değişkenleri olarak ekleyin. Sass Lighten () ve karartmak() İşlevler, karakteriniz için vurgular veya gölgeler olarak kullanılabilecek renklerinizin renk tonları ve gölgeleri oluşturacaktır.

02. Kafayı stil

Yapı ile uğraştığında, önce kafayı tarlatalım. Bu durumda, baş, sanat için güzel bir merkez noktası yapar, bu yüzden pozisyonunu mutlak olarak ayarlamak yerine, akraba olarak ayarlanabilir. Bu, kabın içeride sabit bir elemana sahip olmasını sağlar, diğer yüzer mutlak elemanları bir bağlantı noktası verir ve böylece pozisyonları üzerinde daha fazla kontrol sağlar.

Yüz özellikleri konumlandırma için bir kaba ihtiyaç duyacaktır, bu nedenle bir & lt; div & gt; Genişlik, yükseklik ve arka plan rengine sahip sarı şekil için kafa kabın içinde - şimdi bu dikdörtgenin bir kafa şekli gibi görünmesini sağlayalım. CSS Art'taki en yaygın ve faydalı özelliklerden biri sınır yarıçapı Bir kutunun köşelerinin X veya Y'nin eğrisini değiştiren ve daha fazla organik şekil oluşturmak için kullanılabilir.

Bu tekniği bir REM ve yüzde combo ile kullanarak, doğal olarak ölçekle olan düz elipsler yerine brocuk benzeri şekiller yapabilirsiniz. html {font boyutu: ... px} :

 .face {
Sınır üst-sol-yarıçapı:% 50 4.5rem;
Sınır üst-sağ yarıçapı:% 50 4.5rem;
Sınır alt-sol-yarıçapı:% 50 3REM;
Sınır alt-sağ yarıçapı:% 50 3REM;
...
}

Kafayı mükemmelleştirdikten sonra sınır yarıçapı , yüz özelliklerinin kalanını, gözler, yanaklar, burun ve kulaklar gibi başın çocuk elemanları olarak konumlandırın. Kafa gibi, sınır yarıçapı numara beri kullanışlı olacak Sınır Yarıçapı:% 50 çekici görünmeyebilir.

03. Vücuda ilerleyin

Vücut & lt; div & gt; Gövde kabın içine başın arkasına yerleştirilebilir ve aynı şekilde şekillendirilebilir sınır yarıçapı tekniğin yanı sıra kollar, bacaklar ve kuyruk. Doğru örtüşmeye izin vermek için, gerçek gövde kendi elemanı olmalıdır, çünkü arka çizgilerin tamamen kesilmesi gerekecek Taşma: Gizli . Vücuda daha derinlemesine vermek, dönüşüm: eğri () Mülkiyet gövdeyi hafifçe yapabilir.

Yıldırım cıvatası kuyruğu, bu şekli bir elementten oluşturmaya çalışmak yerine üç ayrı dikdörtgen kullanılarak oluşturulabilir. Dikdörtgenler bir cıvata oluşturmak için birbirinin üstüne döndürülebilir ve konumlandırılabilir. Kollar ve bacaklar SASS kullanarak oluşturduğumuz daha koyu birincil rengi kullanabilir. karartmak() bu yüzden göze çarpıyorlar.

04. Balonlar ekleyin

Şimdi elektrik faresinin tamamlandığı, balonları arkasına bağlayalım. Biraz eklemek & lt; div & gt; Bir çocuk dizesi ile paylaşılan stillerle S & lt; div & gt; ve onları başının üstüne fırlattı. Dize dışında görünmez sınır ötesi , bu daha fazla string benzeri görünmesini sağlıyor.

String karakterinin belinin etrafındaki bağlamak & lt; div & gt; Doğru konumlandırmaya izin vermek için vücudun içine yerleştirilebilir. Dize, vücudun etrafında bağlanmasına bağlı olarak görünecek şekilde hafif bir eğriye ihtiyacı vardır, bu nedenle küçük bir yüksekliğe sahip olabilir, sınır ve bir sınır İnce kavisli bir çizgi yapan sol ve sağ yarıçap:

 .string {
Yükseklik: 1rem;
Genişlik: 9rem;
Sınır-sağ: katı 1px $ beyaz;
Kenarlık Sol: Katı 1px $ beyaz;
Sınır alt: katı 1px $ beyaz;
Sınır alt-sol yarıçapı:% 50 1REM;
Sınır alt-sağ yarıçapı:% 50 1rem;
}

05. CSS'yi canlandırın

Karakter hayatını ekleyerek verebiliriz @keyframes animasyonlar. Kollar, bacaklar, kulaklar ve kuyruk ile canlandırılabilir Dönüştür: Döndür () . Emin olun dönüştürme kökenli 'eklem' olarak ayarlanmıştır (yani bir bacak için en iyi merkezi) ve dönmeyi ayarlayın. Bu animasyon türü bir Sass Mixin'de birkaç kez kullanılabilir:

 @mixin animaterotate ($ isim, $ start, $ end) {
@keyframes # {$ name} {
0%, 100% {Dönüştür: Döndür (# {$ Başlat} DEG)}
% 50 {dönüşüm: döndürme (# {$ end} ° C)}
}
}

Son olarak, Yavaş 5'ler ekleyerek dönüşümü: translatey () KeyFrame Animation, karakteri yüzermiş gibi yukarı ve aşağı canlandıracaktır. Gerçekçilik bir dokunuş için, kullanarak yanıp sönen bir animasyon Dönüştür: ScaleY (0.1) Mülkiyet, gözler kapanıyor gibi görünmesini sağlamak için kullanılabilir.

Bu makale başlangıçta yaratıcı web tasarım dergisinde yayınlandı ağ . Sayı satın al 283 veya abone ol .

Daha fazla oku:

CSS hakkında hiç bilmediğiniz 5 şey
CSS ile SVG filtreleri ekleyin
CSS ile Akıllı Metin Etkileri Nasıl Kod Yapılır

Animasyonlu CSS Sanatı oluşturun

01. Konteynerlerle başlayın

02. Kafayı stil

03. Vücuda ilerleyin

04. Balonlar ekleyin

05. CSS'yi canlandırın

Nasıl Yapılır - En Popüler Makaleler

Görsel Gelişim İpuçları: Yapıtınızla bir hikaye anlatın

NPM ile üretkenliği artırmanın 21 yolu

Artrage kullanarak bir dijital yağlı boya nasıl oluşturulur

Pas ile başlayın

bir vektör yer değiştirme örgü fırçası oluşturun

V-ışını ile daha iyi aydınlatma nasıl elde edilir

Daha Hızlı Web Siteleri Nasıl Yapılır

Güzel bir suluboya manzara boyama nasıl oluşturulur

Kategoriler