CSS ile SVG'ye animasyon nasıl eklenir

Sep 15, 2025
Nasıl Yapılır
Image: Web Designer
[Resim: Web Tasarımcısı]

SVGS ile animasyon söz konusu olduğunda, bir büyük kapanma, JavaScript kütüphanelerinde aşağılanma fikri olabilir. Ancak, bu durum olmak zorunda değil. CSS, efektler oluşturmak için bir SVG içindeki bireysel yolları seçmeyi başarabilir. Sadece temel bilgileri bilmek, düz, klişeli simgeleri biraz daha etkileyici bir şey haline getirmenin mümkün olduğu anlamına gelebilir. Böylece belki de SVG optimizasyonu ve animasyonun temel adımları arasında geçiş zamanıdır. Farklı tasarımlara entegre edildiğinde, olasılıkların sonsuz olduğunu anlamak uzun sürmez.

Daha fazla hareket ilham almak için, Yaratıcı Bloq's rehberine bir göz atın. CSS animasyon örnekleri ve nasıl kodlanır.

Süper erken bir kuş bileti ile 100 £ kazanın Css oluşturmak , bir günlük web konferansı Creative Bloq, Web Designer Dergisi ve Net Dergisi tarafından barındırılan. Buraya kitap .

01. Yarat ve Kaydet

İlk önce, çalışmak için bir SVG oluşturun. Bu eğitim için, Illustrator'da yapılan basit bir grafik kullanacağız. Bir SVG'yi dışa aktarmak için Illustrator'ı kullanırken, grafiğe uyacak şekilde çalışmanın boyutunu azaltın, ardından 'Kaydet' yi tıklatın. 'Tip olarak kaydet' açılır menüsünden SVG'yi seçin, ardından SVG seçenekleri diyalogunda 'SVG kodu ...'.

02. Web için optimize edin

SVG screenshot

Resmi büyütmek için sağ üstteki simgeye tıklayın [Resim: SVGOMG]

Gereksiz etiketleri kesmek, görüntünün başa çıkmasını kolaylaştıracaktır. Bu, kodu favori editörünüze kopyalayarak ve boş etiketleri ve meta verileri kaldırarak manuel olarak yapılabilir. Alternatif olarak, fantastik bir kaynak denir Svgomg Bunu otomatik olarak yapacak. Kodu SVGOMG arayüzündeki 'Yapıştırma İşaretleme' alanına yapıştırın, ardından alt taraftaki düğmeyi kullanarak görüntüyü tekrar kopyalayın.

03. Bir HTML belgesi ayarlayın

Seçim kodunu açın ve boş bir HTML belgesi ayarlayın. CSS animasyonunu denilen bir dosyada yazacağız. ana.css , bu yüzden bunu da yarat. Animasyona odaklanan şeyleri tutmak için, Bootstrap 4.1.3'ün CSS-SADECE sürümünü çektik.

04. Düzeni oluşturun

Düzenimizin kemiklerini kuralım ve SVG için bir alan yapalım. Bir başlık ve iki sütun ekledik: bir metin için solda ve sağdaki bir tane, animasyon yapacağımız SVG'yi tutacak. Sayfayı yukarı canlandırmak için, vücut etiketinde bir arka plan olarak ikinci, statik, SVG kullanın.

05. SVG'yi yerleştirin

Sayfanın üstündeki girişi daha ilginç hale getirmek için animasyonumuzu kullanıyoruz. Optimize edilmiş SVG kodunu sayfadaki ikinci sütuna yapıştırın. Bootstrap kullanıyorsanız, SVG'yi sınıfa verin img sıvısı Cep telefonlarında ölçeklendirdiğinden emin olmak için.

06. SVG'ye dersler ekleyin

SVG'ye sınıf eklemek, CSS'nin görüntü içindeki bireysel şekilleri seçmesini sağlar. Bu, görüntünün farklı şekillerini farklı zamanlarda canlandırabileceğiniz anlamına gelir, daha karmaşık bir etki yaratır. 

 & lt; svg & gt;
& lt; g & gt;
& lt; rektunlu = "rectbackground" genişliği = "147.4107"
Yükseklik = "68.7917" x = "31.2946" y = "114.1042"
rx = "4.5882" ry = "3.9565" dolgu = "# 2A7FFF" / & gt;
& lt; yol sınıfı = "recttext" d = "..." vektör efekti = "Ölçekleme-inme" inme-genişliği = ". 470476156" Yazı tipi boyutu = "12" dolgu = "# fff"
Doldur-kuralı = "evenodd" strok = "# fff" strok-lineecap = "yuvarlak" / ve gt;
& lt; / g & gt;
& lt; / svg & gt;

07. İlk Devletler

CSS'deki SVG elemanlarımızın seçilmesi, başka bir öğeyle aynıdır. SVG içindeki öğeleri seçmek için sınıflarımızı kullanıyoruz. SVG'imizin her iki kısmı, sayfa yüklendiğinde gizlenecek şekilde başlayacaktır, bu yüzden her iki öğenin opaklığını da ayarlamak için CSS'yi kullanalım. 0 . 

 path.recttext {
Opaklık: 0;
}
rect.rectbackground {
Opaklık: 0;
}

08. Animasyonları ilan edin

Her animasyon için isim ve anahtar kareleri beyan etmemiz gerekir, böylece CSS'nin bir etki yapmasını istediğimizde ne yapmak istediğimizi biliyor. seçtiğim textdraw ve rectfade , her animasyonu tarif ettikçe. rectfade basit bir iki adımlı animasyon olacak. textdraw ekstra bir orta adıma sahip olacak. 

 (@keyframes textdraw {
0% {}
% 50 {}
100%{}
}
@keyframes rectfade {
{} dan
{} için
}

09. Animasyon ve özellikleri atayın

SVG and coding

Görüntüyü büyütmek için üstündeki simgeye tıklayın [Resim: Joseph Ford]

Ekliyoruz rectfade animasyon rectbackground eleman ve bir saniyede bir süre ver. Bir kolaylaştırmak Kübik Bezier, daha yumuşak bir his vermek için kullanılıyor. Ekleriz ileri Böylece eleman, animasyon bittiğinde son anahtar çerçevesinin özelliklerini tutar. 

 rect.rectbackground {
Opaklık: 0;
Animasyon: Rectfade 1s Cubic-Bezier (0.645,
0.045, 0.355, 1) ileri;
}

10. Dikdörtgen animasyonu

SVG image

Görüntüyü büyütmek için üstündeki simgeye tıklayın [Resim: Joseph Ford]

Sadece iki ana kare ile, dikdörtgenimiz için yapmamız gereken tek şey bir başlangıç ​​ve bitiş nitelikleri ayarlayın. Bir ile başlayalım % 1 genişlik ve bitirmek 100% 'doğru ecekti genişletmeyi' vermek. Biz de ayarlayabiliriz Opaklık: 1 Son ana kareye doğru, böylece şekil aynı anda kaybolur. 

 @keyframes rectfade {
{
Genişlik:% 1;
}
için {
Genişlik:% 100;
Opaklık: 1;
}
}

11. Metin animasyonu

Metnimizde bir çizgi çizme etkisi yaratacağız, sonra solmaya bir dolgu kullanın. Metin animasyonunu ayarlamak için textdraw dört saniye süreyle. Kübik Bezier, bu adımda biraz farklı bir hareket hızını vermek için değiştirildi. 

 path.recttext {
Opaklık: 0;
Animasyon: TextDraw 4S
Kübik-Bezier (.56, -0.04, .32, .7) ileri;
}

12. Başlangıcını geciktirin

Metnimizin sadece dikdörtgenin solunmasını tamamladığından çalışması gerekiyor. Çünkü dikdörtgenin bir saniyelik bir süreye sahip olduğundan, metin animasyonunun başlangıcını o zaman geciktirin. 

 path.recttext {
Opaklık: 0;
Animasyon: TextDraw 4S
Kübik-Bezier (.56, -0.04, .32, .7) ileri;
Animasyon gecikmesi: 1s;
}

13. Çizgi Çizim Emulate

SVG animation

Görüntüyü büyütmek için üstündeki simgeye tıklayın [Resim: Joseph Ford]

Çizgi çizim efektimizi almak için kullanacağız. inme çizgisi ve İnme-dashoffset parametreler. Değerleriniz, kullandığınız SVG'ye bağlı olarak benimkiyle farklı olacaktır. Değerinizi bulmak için, tercih ettiğiniz geliştirici araçlarını kullanın ve artış inme çizgisi dan 0 Tüm şekil bir vuruşla kaplanıncaya kadar. 

 path.recttext {
Opaklık: 0;
İnme-Dasharray: 735;
Animasyon: TextDraw 4S
Kübik-Bezier (.56, -0.04, .32, .7) ileri;
Animasyon gecikmesi: 1s;
}

14. İlk satır çizim anahtar çerçevesi

Şimdi, tüm metin yolunu kapsayan çok büyük bir vuruşumuz var, etkili bir şekilde itmek için kendi uzunluğuyla ofset verelim. Kullanma İnme-dashoffset aynı değer için dasharray yapmalı. Bunu ilk anahtar çerçevemizde ayarlayalım. Ayrıca şeklin şeffaf doldurmasını ve zaten olmadığı takdirde vuruşları beyaza koyacağız. 

 0% {
Doldur: RGB (255, 255, 255, 0);
İnme: #fff;
İnme-DashOffset: 800;
Opaklık: 1;
}

15. Çizgileri çizin

Orta anahtarlıkımızda görünür % 40 animasyon yoluyla. Biz getiriyoruz İnme-dashoffset Sıfıra dönün, böylece çizgi tüm yolu kaplar. Çizimin tamamlandıktan sonra, dolgunun yalnızca göründüğünden emin olmak için bu aşamadaki şeffaf dolguyu yeniden ekleyebiliriz. 

% 40 {
İnme-dashoffset: 0;
Doldur: RGB (255, 255, 255, 0.0);
}

16. Şekli doldurun

Animasyonun son bölümünde, şekli beyaz olarak dolduracağız. Son anahtarlık için yapmamız gereken tek şey, doldurma renginin alfa değerini yükseltmektir. Bu, dolgunun etkisiyle solmaya başlar. 

% 100 {
Doldur: RGB (255, 255, 255, 1);
İnme-dashoffset: 0;
Opaklık: 1;
}

generate conference

Bu makale başlangıçta yaratıcı web tasarım dergisinde yayınlandı Web tasarımcısı . Sayı satın al 286 veya abone ol .

Daha fazla oku:

  • CSS ile SVG filtreleri ekleyin
  • CSS şekilleri ile nasıl tasarlanır: bir giriş
  • CSS ile Akıllı Metin Etkileri Nasıl Kod Yapılır

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

İllüstratörde kendi kaligrafi fırçanızı oluşturun

Nasıl Yapılır Sep 15, 2025

Illustrator ile ilgili en iyi şeylerden biri, kendi fırçalarınızı oluşturma yeteneğidir. Bazı şaşırtıcı ücretsiz i..

Sketchup ile bir kale nasıl boyanır

Nasıl Yapılır Sep 15, 2025

Bir dizi var Sanat Teknikleri Bu, dijital resminizde yardımcı olabilir, ancak bu yaratmanın inkar edilmemesi yo..

Terminator hattı nedir?

Nasıl Yapılır Sep 15, 2025

Formu iletmek için düşünmeniz gereken aydınlatmanın birçok yönü vardır. Çok yararlı bir temel terminatör hattıdır...

Slick UI animasyonları oluşturun

Nasıl Yapılır Sep 15, 2025

Daha fazla ve sık sık, tasarımcılar ve geliştiriciler, hareket tasarımının içeriğinde önemini kabul ediyorlar. ..

WordPress API'sini kullanarak bir blog güç

Nasıl Yapılır Sep 15, 2025

Geçtiğimiz birkaç yıl boyunca, WordPress için bir dinlenme API'nin gelişimi geliştiriciler için yeni kapılar açtı. Dah..

İPad için afinite fotoğrafı nasıl çizilir

Nasıl Yapılır Sep 15, 2025

İPad için afinite fotoğrafı harika fotoğraf Editörü , Fakat Serif'in çizimleri sıfırdan örn..

Reaksiyona sahip basit bir müzik çalar oluşturun

Nasıl Yapılır Sep 15, 2025

Tepki Kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kütüphanesidir ve bu eğitimde size basit b..

FlexBox'un inanılmaz gücü

Nasıl Yapılır Sep 15, 2025

FlexBox veya Esnek Kutu Düzeni, web tasarımcıları ve geliştiricilere, elemanları bir kapta yerleştirmek, hizalamak ve dağ..

Kategoriler