Animasyonlu bir yazma etkisi nasıl oluşturulur

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

İyi kullanıldığında, CSS animasyonu Sitenize ilgi ve kişilik ekleyebilir. Bu yazıda, tipografınızın kademeli olarak görünmesini sağlayacak bir animasyonlu efektin nasıl oluşturulacağını, bir daktiloda yazılıyormuş gibi yapacağız. Sitede eylemdeki animasyonun bir örneğini görebilirsiniz. Kripton , bir kriptokurans ticareti botu. Etkisi etkileyicidir ve uygulanması kolaydır.

İyi web tasarımı oluşturmanın diğer kolay yolları için mükemmel bir şey deneyin Web Sitesi Oluşturucu aracı veya bir üst ağ sağlayıcısı hizmet. Veya, bu animasyonun kendi sitenizde nasıl başarılacağını öğrenmek için okunur.

  • CSS animasyonunun yeni sınırını keşfedin

01. Belge Başlangıcı

İlk adım, web sayfasının yapısını başlatmaktır. Bu, kafa ve vücut bölümlerini depolamaktan sorumlu olan HTML konteynerinden oluşur. Baş bölümün ana sorumluluğu harici CSS'yi yüklemektir, vücut bölümü 2. adımda oluşturulan HTML içeriğini saklar. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; unvanı ve gt; yazma efekti & lt; / unvanı ve gt;
& link rel = "Stylesheet" Type = "Metin / CSS" href = "styles.css" / & gt;
/ head & gt;
& lt; vücut ve gt;
*** 2. adım burada
& lt; / body & gt;
& lt; / html & gt;

02. HTML içeriği

HTML içeriği, 'yazarak' sınıfını kullanan bir kaptan oluşur. Bu, CSS tarafından yazma etkisini herhangi bir alt öğeye uygulamak için kullanılacaktır. Çocuk İçerik elemanı bir H1 etiketinden yapılır, ancak öğeyi paragraf olarak oluşturmak için 'P' gibi başka bir öğe kullanabilirsiniz. 

 & lt; div class = "yazarak" & gt;
  & lt; h1 & gt; başlığınızı buraya koyun ... & lt; / h1 & gt;
& lt; / div & gt;

03. CSS Başlatma

'Styles.css' adlı bir dosya oluşturun. CSS'nin ilk adımı, herhangi bir görünür kenar boşluğu olmadan tam tarayıcı penceresini kapatmak için belge ve vücut kaplarını tanımlar. Siyah sayfa arka planı ve beyaz metin renkleri için varsayılan renkler de bu adımda ayarlanır. Sayfadaki içerik elemanları, bu adımda ayarlanan rengi varsayılan rengiyle miras alır. 

 ​​vücut, html {
  Ekran bloğu;
  Genişlik:% 100;
  Yükseklik:% 100;
  Arka plan: # 000;
  Renk: #FFF;
  Dolgu: 0;
  Marj: 0;
}

04. Çocuklar yazma

Yazma kabınındaki tüm çocuklar, metin sarma kullanmadan bir satır üzerinde gösterilecek şekilde ayarlanır. En önemlisi, bu çocuk elemanları 'yazma' animasyonuna uygulanmıştır. Bu animasyon, kademeli yazma etkisinin sağlanması için 50 kare anlık görüntüyle beş saniye boyunca oynayacak şekilde ayarlanmıştır. 

 ​​.Typing & gt; * {
  Taşma: Gizli;
  beyaz boşluk: nowrap;
  Animasyon: Typinganim 5S Adımları (50);
}

05. Yüz Gözleri

Etkinin, yazılan metni anlattığı animasyonlu bir yüze eşlik eder. Bu adım, bu yüzün gözlerini, kullanan bir CSS 'sanal' öğesi olarak oluşturur. sonra seçici. Gözler, içerik iki nokta metin karakteri olarak ayarlanmış olan ana metne göre yerleştirilir. 

 ​​.Typing & gt; *::sonra{
  İçerik: "..";
  Ekran bloğu;
  Konum: Mutlak;
  Üst: 1EM;
  Sol: .35em;
}

06. Yüz ağzı

Gözlerle olduğu gibi, yüzün ağzı bir CSS sanal elemanından yapılır - bu kez önce seçici. Ağız, ana metin elemanına göre konumlandırılmış ve yuvarlatılmış bir şekil ile görünecek bir sınır yarıçapına sahip olmasıdır.

tipingpeak animasyon uygulanır; İki animasyon çerçevesi kullanarak 0,5 saniye sürecek. Animasyon beş kez tekrarlanırken, toplam animasyon süresi 2,5 saniye olacaktır. 

 ​​.Typing & gt; *::önce{
  İçerik: "";
  Konum: Mutlak;
  Ekran bloğu;
  Üst: 2.1EM;
  Sol: .25EM;
  Genişlik: 1EM;
  Yükseklik: .1em;
  Sınır-yarıçap:% 100;
  arka plan: #fff;
  Animasyon: YazmaPeak .5S Adımları (2);
  Animasyon-yineleme-sayısı: 5;
}

07. Animasyon Tanımları

Bu adım, önceki adımlarda oluşturulan öğeler tarafından referans verilen animasyonları tanımlar. Typinganim Yazma etkisi için kullanılan animasyon, elemanını genişlikten tam olarak değiştirmez. tipingpeak Yüzün ağzında kullanılan animasyon, elemanını daha açıkken düz görünmesini değiştirir. 

 ​​@keyframes typinganim {
  {genişlikten: 0}
  {genişlik: 100%}
}
@keyframes typingspeak {
  0% {genişlik: 1EM; yükseklik: .1em}
  % 100 {Genişlik: 1EM; Yükseklik: .5EM; }
}
***

Tasarruf etmek için tasarım dosyaları var mı?Yükseltin Bulut depolama Yani işe kalmış.

Bu makale başlangıçta Yaratıcı Web Tasarım Dergisi Web Tasarımcısı'nın 275 sayısında yayınlandı. Sayı 275 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

  • Slick UI Animasyonları Oluştur
  • CSS ekran özelliğini anlamak
  • Animasyonlu bir buhar metin efekti oluşturun

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

Photoshop'ta bir görüntü nasıl yeniden boyutlandırılır

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

Photoshop'ta bir görüntünün nasıl yeniden boyutlandırılacağını bilmek, tasarımcılar için temel bir beceridir. Web'e ..

Bir Elf Maide Boya Nasıl Boyayın

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

Bu eğitimde, bir Elf Maiden'ın büyüleyici bir fantezi portresi oluşturma sürecinde sizi yönlendireceğim. Hikayesi, bazı ..

Master versiyonu kontrolü

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

Uzaktan çalışma, son birkaç yılda web geliştirmede çok daha yaygınlaşmıştır. Sürüm kontrolünden önce, uzaktan ayn..

6 basit adımda 3D manzara oluşturun

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

Bir parça yaratmak 3d sanat Doğal görünümlü bir manzara ile bir meydan okuma gibi görünebilir, ancak doğr..

Sert yüzey modellemesi için 10 ipucu

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

Brunel'in Büyük Doğu vapurunun 1858'den itibaren bu görüntüsü, 2018 ilkbaharındaki kapılarını açan Bristol'deki 7 mil..

Cinema 4D'de Çizgi Film Karakterleri Nasıl Oluşturulur

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

Mobil oyunların ve indie'nin gelişiyle video oyunları , büyük bir illüstratör ve animatörlerin içine gire..

CSS ile animasyon kullanarak menülerinizi güçlendirin

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

Dünyayı anlamadığımız animasyon yoluyla: kapılar açık salıncak, arabalar onların hedeflerine sürüş, dudaklar gülü..

Sensör verilerini toplayan bir uygulama oluşturun

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

Günümüzde birbirine bağlı ürünleri geliştirmek için uygun fiyatlı platformlar yaygın kullanılabilirliğin tadını ç..

Kategoriler