Animasyonlu bir 3D metin etkisi oluşturun

Sep 11, 2025

Nasıl Yapılır

Kayıp Aşk Kanada'nın Jam3 Kayıp aşk etrafındaki dayanıklı duygular hakkında gerçek kalpli güzel bir karanlık, mobil hazır etkileşimli bir şiirdir. Web Sitesi Düzeni HTML5 kullanılarak yapıldı. Gsap Kütüphane animasyonunu güçlendirerek, en görsel olarak çarpıcı özelliklerinden biri, gerçekten sevginin kayıp şiirinin hayata geçirdiği animasyonlu 3B metnidir.

Etkileşimli 3D tipografi etkileri yapın

Cehennem kadar etkileyici görünüyor ve bir ilgi çekici oluşturmak için kendi işinize dahil etmek zor değil. kullanıcı deneyimi ; İşte nasıl bitti.

Kendi ilgi çekici sitenizi yapmak ister misiniz? Deneyin Web Sitesi Oluşturucu Aracı ve doğruları sağlayarak sorunsuz bir şekilde çalışmasını sağlayın ağ sağlayıcısı hizmet.

Love Lost's 3D text comes right out of the screen at the viewer — LOV kaybolan 3B metni, izleyicinin hemen dışına çıkıyor

01. HTML belgesini başlat

İlk adım, HTML belgesinin yapısını tanımlamaktır. Bu, kafayı ve vücut bölümlerini içeren belgeyi başlatan HTML kabını içerir. Baş bölümü öncelikle harici CSS dosyasını yüklemek için kullanılırken, vücut bölümü 2. adımda oluşturulan görünür sayfa içeriğini saklar.

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; unvanı ve gt; 3D metin hareketi; / unvan & 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. Görünür HTML içeriği

Görünür HTML içeriği görünür metni içeren bir makale kabından oluşur. Makale kabının önemli kısmı, görsel efektleri uygulamak için CSS tarafından başvurulacak olan 'Veri-Animate' özniteliğidir. Makalenin içindeki metin, içeriğin ana başlığı olduğunu belirtmek için bir H1 etiketinden yapılır.

 & lt; makale veri-animate = "Taşı" & gt;
  Orada merhaba h1 & gt! & lt; / h1 & gt;
& lt; / Madde & gt;

03. CSS Başlatma

'Styles.css' adlı yeni bir dosya oluşturun. İlk talimatlar seti, sayfanın HTML konteynerini ve gövdesini siyah bir arka plana ve görünür sınır aralığına sahip olmamak üzere ayarlayın. Beyaz, sayfadaki tüm alt öğeler için varsayılan metin rengi olarak da belirlenir; Varsayılan siyah renk rengini önlemek, içeriğin içerik yapılması görünmez görünüyor.

 html, vücut {
  Arka plan: # 000;
  Dolgu: 0;
  Marj: 0;
  Renk: #FFF;
}

04. Animasyon Konteyneri

'Veri-Animate' özniteliğinde referans verilen içerik kabı, uygulanan belirli stillere sahiptir. Boyutu, VW ve VH ölçüm birimleri kullanılarak ekranın tam boyutunu ve hafifçe döndürülmesinin yanı sıra ayarlanır. 'Movein' olarak adlandırılan bir animasyon uygulanır, bu da 20 saniyelik bir süre sürecek ve sonsuz şekilde tekrarlanacaktır.

 [Veri-animate = "Taşı"] {
  Konum: Göreceli;
  Genişlik: 100vw;
  Yükseklik: 100vh;
  Opaklık: 1;
  Animasyon: 20'li yılların sonsuzluğunu hareket ettirin;
  Metin Hizası: Merkez;
  dönüşüm: döndürme (20deg);
}

05. Animasyon başlangıcı

Önceki adımda başvurulan 'hareket ettirin' animasyonu, @keyframes kullanarak bir tanım gerektirir. Animasyonun% 0'unda başlayan ilk kare, varsayılan yazı tipi boyutunu, metin konumlandırmasını ve görünür gölgeyi ayarlar. Ek olarak, öğe sıfır opaklık ile ayarlanır, böylece başlangıçta görünmez - yani. görüş dışında görüntülenir.

 @keyframes movein {
  0% {
  Yazı tipi boyutu: 1EM;
  Sol: 0;
  Opaklık: 0;
  Metin gölge: Yok;
  }
  *** Adım 6 burada
}

06. Görüşte Animate

By using multiple shadows you can enhance the 3D effect — Birden çok gölgeyi kullanarak 3B etkisini artırabilirsiniz

Bir sonraki kare animasyon yoluyla% 10'a yerleştirilir. Bu çerçeve, opaklığı tamamen görünür şekilde ayarlar, metnin yavaş yavaş görüntüye dönüşmesini sağlar. Ek olarak, 3B derinlik yanılsamalarını metne vermek için mavi ve azalan renk değerleri ile çoklu gölgeler eklenir.

% 10
{
  Opaklık: 1;
  Metin gölgesi:
  .2EM-2.2EM 4px #aaa,
  .4EM -.4EM 4px # 777,
  .6EM -.6EM 4px # 444,
  .8em -.8EM 4px # 111;
}
*** Adım 7 burada

07. Animasyonu Sonlandırma

Son çerçeveler,% 80 ve animasyonun sonunda meydana gelir. Bunlar, yazı tipi boyutunu arttırmaktan ve elemanı sola doğru hareket ettirmesinden sorumludur. Metin gölgesi için, metni anlatılacak metin gölgesi için de uygulanırken, ayrıca metnin çerçevelerden% 80'den% 100'e kadar solması.

% 80 {
  Yazı tipi boyutu: 8EM;
  Sol: -8EM;
  Opaklık: 1;
}
100%{
  Yazı tipi boyutu: 10EM;
  Sol: -10EM;
  Opaklık: 0;
  Metin gölgesi:
  .02EM -.02EM 4px #aaa,
  .04EM -.04EM 4px # 777,
  .06EM -.06EM 4PX # 444,
  .08EM -.08EM 4PX # 111;
}
***

Not: Başlayacağınız proje ne olursa olsun Bulut depolama Bu başa çıkabilecek önemlidir (rehberimiz yardımcı olacaktır).

Bu makale başlangıçta yaratıcı web tasarım dergisi web tasarımcısının 273 sayısında yayınlandı. Sayı 273 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

Parlayan bir neon metin efekti oluşturun
Web Animasyonlarını Hata Ayıklayabilirsiniz
Web animasyonları için storyboard oluşturun

Animasyonlu bir 3D metin etkisi oluşturun

01. HTML belgesini başlat

02. Görünür HTML içeriği

03. CSS Başlatma

04. Animasyon Konteyneri

05. Animasyon başlangıcı

06. Görüşte Animate

07. Animasyonu Sonlandırma

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

Artrage ile başlayın

WebVR ile başlayın

Illustrator'da ürün simgeleri kümelerini oluşturun

Photoshop'ta bir Sci-Fi oyun ayarı boya

Origami Studio ile bir mobil uygulamayı prototip nasıl yapılır

Duyarlı ve cihaz-agnostik formların nasıl tasarlanması

HTML tuvaliyle başlayın

Monet gibi boyama sırrı

Kategoriler