9 HAZİRAN 2013, Pazar

Html5 Css3 Animasyonlu Yinelenen Döşeme Arka Planı Ana Kareleri Öğretici

Oluşturmak öğrenebilirsiniz bu html5 CSS animasyon programlama dersi herhangi bir içerik kutuları için 24 animasyonlu yinelenen kiremitli arka olmak başlıkları şunlardır sancaklar web sayfası üzerinden herhangi bir alanda bu görevi başarmak için CSS3 kareleri kullanarak olacak şimdi bitiş ürünü bir göz atalım bizim eller kirli olsun önce Benim video s olacak Pierre biraz dalgalı akılda tutmak Benim optimize kare hızına sahip çünkü ben Eğer makinenizde bu çalıştırdığınızda o Butta gibi pürüzsüz olduğunu fark edeceksiniz Eğer yeni bir web sitesi çalıştırmak küçük bada var Her zamanki çıplak kemikleri ile

başlayacağım gibi pek bir html5 web belgeleri var Herkes üretim akışını görebilirsiniz Şimdi benim vücut elemanı ve ben HTML benim adım testi ben diş neşeli var senin adlandırabilir HTML ve bedenimi elemanı Ben yer

bu basit bir HTML kodu değilim Beni ne kadar basit gördüğünüz gibi etrafta o biraz yer vermek ama yaptım içinde bir fikir afiş vermek zorunda Çocuk kimlikleri var bir çocuk addır banner zemin ve başka bir ç

“Ders Kodu: http://www.developphp.com/video/CSS/Animated-Repeating-Tile-Background-keyframes-Tutorial HTML5 ve CSS3 kullanarak kiremit arka tekrarlayan animasyon o...”
Adam Khoury

ocuk için ideal bir afiş içeriği ile yaptığımız ve doğru sizin afiş içerik koymak bunu tahmin ne olursa olsun, HTML Tam burada istediğiniz içeriğe ve banner arka elemanı grafik unsurdur Bu animasyon boyunca rulo ve arkadaşım tüm HTML var tamam şimdi vücudunu etkiler ilk sayfaya CSS uygulayarak başlayalım sayfadaki eleman bu yüzden biz burada vücudun elemanı için yeni bir kural var ve marjı 48 piksel vardır Sayfanın tüm yol etrafında dört tarafı için ar

Html5 Css3 Animasyonlu Yinelenen Döşeme Arka Planı Ana Kareleri Öğretici Resim 1 Html5 Css3 Animasyonlu Yinelenen Döşeme Arka Planı Ana Kareleri Öğretici Resim 2 Html5 Css3 Animasyonlu Yinelenen Döşeme Arka Planı Ana Kareleri Öğretici Resim 3 Html5 Css3 Animasyonlu Yinelenen Döşeme Arka Planı Ana Kareleri Öğretici Resim 4

ka plan siyah ve sayfa için yazı aile bu yeni favori işlemek için gerçek bir görüntüleyici görürsünüz tarayıcı Eğer bir şey var ve ücretli ama biz görebilirsiniz olmak sayfada metin var Metin nedeniyle varsayılan siyah Onun sayfa her zaman şimdi varsayılan siyah metin var en bir kural koyalım olduğunu bu pankartı etkiler pes yani vücudumuzun egemenliği altında gitmek ve bu etkilenen var ID içinde yaptım Birçok 1000 piksel yüksekliğinde afiş vermek ettik 200 piksel margin: 0 piksel o bu unsuru merkezleri yol olduğu söy

lendi bizim web sayfası ne kelime centerset öyle elemanı içeren ve sonra bizim sınır hafif mor bir piksel katı ve bu gizli olduğunu kutusunda taşma oldukça önemli bir özelliktir Taşma: Eğer taşma gizlemek yok gizli İnsanların animasyon hileli ve herşeyi nasıl göreceğiz görüneceğim yucky olan CA çocuklarının çünkü kutunun dışında olan her şeyi gizlemek için o olacak bu afiş zemin gibi alt öğeleri hareketli ve birlikte haddeleme ve sizin lehinize tarayıcınızda bu bir göz atın Her şeyi ve Paige vurgulamak eğer ve bu olmalı Şimdi bazı CSS olacak pop konum metin görürsünüz vermek, bu afiş yedeklenen etkileyecek gidiyor bir kural var bu yüzden bir fikir afiş ve çocuk yaptım belirtmek Kimlik afiş arka elemanı temelde bir hedefleme kimliği afiş, böylece zemin Emin afiş zemin yapmak animasyonlu eleman olacak Bir pozisyon ve göreli ve arka plan özelliği tekrarlayıcı .jp örneğin sevgi ve yapacağız tekrarı konum o görüntü yatay düzlemde açıklar Bu elemanın içinde bu eleman genişliğinde 1320 olacak çünkü ama benim tekrarlanan IJ peg sadece 320 piksel genişliğinde ve yükseklik bu afiş arka olacak olduğunu Hyde maç 200 $ olacak banner kendisi görmek için nasıl bu eleman ile 1320 olacak ve ben RJ 320 piksel izin pagaste sen tekrarladı söyledi hatırlamak için gidiyor Beni bu görmek olduğunu göstermek Tekrarlanan IJ bunu sadece küçük küçük olduğunu görebilirsiniz havai fişek burada peg Sadece dikdörtgen Özellikler penceresini getirmek ve sahip olduğu göreceksiniz 320 ve hiper 200 sana bir verebilirim nasıl olacak bu animasyon olacaksın grafiksel gösterimi Ben sadece çok burada çok kampüs boyutunu değiştirmek olsaydı 1000 piksel genişliğinde boyutları hangi % uh benim afiş yüzden ne yapacağım burada bu var olan Şimdi Denetim kontrol edilebilir bkz basın ve ben bu tekrarlamak bir eleman var demek arka plan tamam bu yüzden bu var bu kez benziyor Ben grup bu can ve en bu afiş arka elemanıdır diyelim onun tekrarlanan Grafik ve biz yapmak için gidiyoruz sadece acil olduğu 320 piksel o onun sonraki getirene kadar mantıklı çini grafik için bir başlangıç ​​tarihi sadece yeterince böylece yalnızca sen ve ben bu şekilde sonraki kiremit karşılar giymek Bir kişi görmek için ben bütün elemanının tüm yol animasyon zaman Bu eleman emin olun ne biz yapmak zorunda tüm yemek yapıyoruz yapmak olduğunu banner zemin Senin o büyük afiş kendisi vardır ve daha sonra bu eleman afiş gelen animasyon kadar büyük olacaktır yedeklenen Ancak birçok eksi sol başlangıç ​​noktası sıfır gitmek gerekir sol Ben edeceğiz dahaki sefere karşılamak böylece bir grafik gösterimi var animasyon biz olacak oluşturacağınız konum ve görsel görmek için yardımcı olur bu yüzden afiş arka planında özellikleri yeniden noktadadır hatırlıyorum üzerine gidelim göreceli bu şekilde biz onun ana öğenin içinde hiçbir sorun taşıyabilirsiniz Arka plan özelliği Ben J Pague grafik olduğunu O Jay putperest sana o görüntüyü gösterdi ve sadece 320 olduğunu gözlerimi tekrar ediyor geniş Ben genişliği benim set neden boyutları eleman banner 13 20 1000 yedeklenen benim afiş var 320 Benim tekrarlanan karo arka planda tamam anladım ile şimdi tamam biz koymak için gidiyoruz son CSS kuralını birlikte hareket edelim Burada etkilenen afiş içerik elemanına biridir böylece hamle CSS son kural sahip oldukları afiş içeriğini hedef olduğunu Bu birikimi vermektedir doksan altı yüzde bağıl Eğer boşluk onu alabilirsiniz yolu Burada bana tekil bir alma gibi bahsettiğimi sana göstereyim favori tarayıcı Her şeyi doğru konumda olduğunu ne bkz ama animasyonlu değil henüz şekilde ben olması gereken yerde olması için bu metin var pozisyon üst veriyor afiş içeriği eksi 200 piksel Ayrıca emo tür animasyonlar arayan afiş içinde içerik hareketlendirebilirsiniz oluyor ancak bu durumda farelerde benim afiş içeriği yalnızca metin olacak Ben bu sınır verim verirseniz ve bunu bir daha onu vermek daha iyi görmek mümkün sınır Bazı parlak renk 1 pixel kesik ve daha sonra favori tarayıcı olduğunu çalıştırmak ve görürsünüz Ben orada biraz içinde yastıklı nereye kurmak nasıl Eğer kendi iradesine içerik değil koymak zaman kenarlarına tüm kadar bu şekilde değil engelli bakmak şimdi mavi kenarlığı kaldırmak çalışmaya devam bkz Şimdi son adım bu fon animasyon ve bunu yapmak için çok basit çok doğru banner zemin egemenliği altında yapacağız anahtar kare animasyon koymak konum İşte Ben Chrome'da test ediyorum çünkü WebKit öneki kullanmak için gidiyorum ve ben arka rolü denir benim anahtar kare animasyon istiyorum Bunun doğru 0 piksel gitmek istiyorum farklı şekillerde tüm farklı gidebilirsiniz 320 piksel yazmak ve orada etmek yol tarifi böyle bir atmosfer bakmak gidiyor bir yol ya da diğer yapmak için Sağdan sola sola özelliğini ya da sağ özellik hedef böylece ne biz baş yukarı ve aşağı sallanan ile yaptığı son ana kareler öğretici hatırlıyorum biz ön kullanıyorsanız şimdi yüzde 50 yüzde yüz kullanılmış ve anahtar kelimeler böylece size animasyon kareleri tutmak zorunda sadece eğer can sizden kullanabilirsiniz ve doğru pozisyonda iki yerde hemen Bir doğru pozisyona 0 piksel 320 piksel ve 320 piksel animasyon sonra otomatik olarak sadece geri ek gidiyor Şimdi bu zemin rol anahtar kareler animasyonu yapmak için Bu afiş arka elemanına bağlı yapmamız gereken tüm Burası bir çizgidir bu anahtar kareyi kullanmak için gidiyor unsur olduğunu kurmak için animasyon bu yüzden bir WebKit animasyon özelliği var ve gelecekte biz WebKit ihtiyacınız olmayacak olmuş olabilir tüm önek biz sadece çok yakında animasyon kullanabilirsiniz söylüyorlar Sana göstereceğim size Firefox Internet gerek diğer önekleri değilim Kâşif bu nedenle bu afiş zemin animasyon özelliği animasyon olarak belirtilen bir zemin rol içinde Bu eleman kullanmak ve zemin rolü için gidiyor anahtar kareler animasyon doğrusal bir şekilde ne olacak böylece zamanlama fonksiyonu nah kolay n kolaylığı olabilir kolay şimdi lineer ve yıl içinde bu örnekte istediğiniz biri için veya gidiyor, böylece on beş saniyelik aralığı 320 gitmek için onbeş saniye almak piksel bu sonsuz bir döngüye olacak ve bu hız olurdu 15 saniye bu yüzden hepiniz gibi kendi bir şey rağmen yapmak zorunda Beş ve benim animasyon şimdi çalışır ne kadar hızlı görürsünüz Hasta çalışan şimdi test edebilirsiniz böylece gidiş arka planında ne istersen bu numarayı ayarlayabilirsiniz ne kadar hızlı bakın Oniki gibi bir şey iyi olabilir tamam istersen hız ne olursa olsun tamamlanan çalışma tüm bu yüzden Firefox, Internet Explorer başka bu testi emin yapmak zorunda popüler modern tarayıcılar bu o işe yaramazsa ve sonra önek kurmak zorunda Eğer eski tarayıcıları hedeflemek istiyorsanız ve ayrıca önek koymak zorunda ama hepsini alir ben ne yapacağım 3 önek biz götürürüz olduğunu düşünüyorum olduğunu biz gidiyoruz çünkü animasyon özelliği Standart Geçen animasyon özelliği sözdizimi tüm bar sonra önekleri de bu almaya gidiyorum İstersek biz böyle tek bir satır içine tüm koymak hangi İsterseniz bir satırda birlikte tüm koymak ve bunu kopyalayıp sağ altında bu hat alabilir WebKit öneki olmadan düzenli kare sözdizimi koymak Şimdi dosya ortamı tarayıcısında bu test edelim Firefox firefox gerektirmez görebilirsiniz Animasyon biz WebKit kullanıyoruz üzgün önek biz biraz daha fazla% uh Firefox toplayıp öneki çoğu kullanmıyorsunuz demektir Bu anahtar kare özelliği ve animasyon özelliği gerçekten güzel varsayılan sözdizimi şimdi en Dosya gidelim tarayıcısı Internet Explorer'da önizleme Internet Explorer'ın yanı sıra çalışma ancak bu modern versiyonları bu tarayıcılar yeni olanlar are bu yüzden ben bu WebKit kaldırırsanız ne olur acaba referanslar söylüyorlar o Chrome'da çalışır bakalım Tarayıcı krom önizleme dosyası şimdi krom hala WebKit önek gerek ve Safari Ben ikinci Safari inanıyorum Tamam biz iyi WebKit öneki ile Safari çalışmak Şimdi kızılağaç Internet Explorer gibi eski tarayıcılar için yapacağız önek eklemek olduğunuz tüm Firefox sürümleri Sadece kapmak izin böylece gerekli Bu hat tam burada ve WebKit altında daha bu ve bu gecikmedi 12 mos değiştirir Internet Explorer, MS Internet Explorer için bu bir çok ms mose ateş WebKit Safari olduğu ve krom şimdi biz sadece bunlar için aynı şeyi yapmak zorunda Ana kareler iki tane daha o almaya kendini animasyon Simos ve MS şimdi küçük uygulaması yönüyle çalışma olacak ne olursa olsun tarayıcı bile bize bazı eski test Internet Explorer 9 gibi Internet Explorer sürümleri Bu animasyon eski Firefox sürümleri de çalışabilir ve gerektiği Umarım iyi adamlar css3 HTML5 memnun kaldım animasyonlu tekrarlayan bir arka plan kiremit öğretici ve biz sonraki derste görürsünüz.

Açıklama

Ders Kodu: http://www.developphp.com/video/CSS/Animated-Repeating-Tile-Background-keyframes-Tutorial HTML5 ve CSS3 kullanarak kiremit arka tekrarlayan animasyon oluşturmak için öğrenin. (1) banner_backdrop genişliğini banner genişliği artı yinelenen kiremit resmin genişliği olun. (2) taşma bayrağını ayarlamak emin olun: gizli ;. (3) sağa ya da sola banner_backdrop animasyon, sadece bir sonraki kiremit ulaşmak için yeterli mesafe. Daha sonra üzerine, döngüler ve üzerinde sorunsuz pürüzsüz akışkan etkiyi üretmek için. Bazı gerçek eğlenmek için bulutlar ve uzay yinelenen kiremit kökenden ile deneyin. Web sayfasının herhangi bir içerik kutuları, afiş, başlıklar, veya herhangi bir bölge için güzel animasyonlu yinelenen çini arka oluşturmak öğrenin. Biz bu görevi başarmak için CSS3 ana kareleri kullanarak olacaktır.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.7/10

  • 369
    Olumlu
  • 10
    Olumsuz
  • 80
    Yorum
  • 42357
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Ammine Getahun

    Ammine Getah

    21 HAZİRAN 2011
  • kremosakhaz

    kremosakhaz

    25 AĞUSTOS 2006
  • TopOfTheTech

    TopOfTheTech

    5 NİSAN 2010

ANKET



Bu sayfa işinize yaradı mı?