26 Mayıs 2013, Pazar

Saf Css Animasyonlu Menü Düğmeleri Css3 Geçiş Html5 Öğretici

Bu CSS3 dersinde biz ne kadar basit gösterecek ve pürüzsüz ve tereyağı özel animasyonlar elde etmektir temiz senin düğmesi ve menü sistemleri sihirli gerçekleştirmek için bir kod satırı kullanmak için gidiyoruz Bizim akranlarının çoğu hala inatçı JavaScript animasyonu dahil ederken kütüphaneler Hala gibileri görürseniz sayfalarında basit animasyonlar gerçekleştirmek ve Bir enayi onları arayın ki ama Böyle şeyler öğrenmek bundan sonra ben ne var Biz koduna bakmak önce bitiş ürünü bakalım Bu menü sisteminde mouseover üzerinde içindir ve Fare dışarı davranışı üzerinde onlar kadar güzel ışık nası

l görebilirsiniz animasyonlu moda maske üzerlerine olduğunda Kullanıcı onları genelinde fare geçer eğer serin olsun Kara Şimşek gibi üye kiti etkiler Eğlenceli gece yazar serin kim kimin O bebek ile Michael ne

yaptığını Michael'ın tamam bu yüzden bunu başarmak için çok basit bir yolu var Ben tekrar ve rollout olay animasyonlar roll tamam çıplak kemikleri bir html5 web belgesine sahip olan başlayalım ve ben benim

“Ders Kodu: http://www.developphp.com/video/CSS/Pure-CSS-Animated-Menu-Button-Transitions Eğer CSS biliyor her türlü ve her animasyon-mümkün özellik hedef CSS3 geç...”
Adam Khoury

isim örnek nokta HTML ve senin adlandırabilir i gövde elemanının içinde artık eşcinsel baba HTML değilim Ben yeni bir anlaşma oluşturmak edeceğim ve aslında HTML5 kullanabilirsiniz Şimdi bunun yerine mısın var mı burada öğesi Böyle bir menü çubuğu veya bir şey benim ayağında kullanıldığında eğer yerine yaptım suçları kullanabilirsiniz ve bu gün vereceğim Menü çubuğuna ve kimlik onun eşit onlar bu yüzden bazı içerik koyabilirsiniz yaptım içinde bir anda bira

Saf Css Animasyonlu Menü Düğmeleri Css3 Geçiş Html5 Öğretici Resim 1 Saf Css Animasyonlu Menü Düğmeleri Css3 Geçiş Html5 Öğretici Resim 2 Saf Css Animasyonlu Menü Düğmeleri Css3 Geçiş Html5 Öğretici Resim 3 Saf Css Animasyonlu Menü Düğmeleri Css3 Geçiş Html5 Öğretici Resim 4

z boşluk kadar açık Şimdi biz elemanın basit düğmeleri dışarı yapacağız Bağlantı elemanı yani orada bir gezi vermek emin olun bir elemanın koydum şimdi niteliklerini sadece bu örnek kiloluk işareti mayın eşit hale Sayfayı size 1 gezinmek koymak budur Ben isteseydim bu yüzden nokta PHP ile irtibata gitmek Bu gezinti amaçlı oraya gitmek istiyorum tamam bu yüzden sadece o düğme için etiket olarak eve koyacağım şimdi bazı kopyaları hakkımızda yapıyoruz yapmak hizmetler düğmesi personeli ve iletişim düğmesi Bu geçen ay temas 20

personel ile Bu bir bu bir hizmet Bu yeni favori tarayıcı altında şiddetli hakkımızda şimdi sen yok olduğunu görüyoruz her şey çok heyecan verici ve olan bağlantılardan birini dize gibi görünüyor onlara hiçbir boşluk var sen baş elemanı içinde şimdi ne istediğinizi tam olarak Benim belge Ben açmak ediyorum stil öğesi emin ben içimde yapacağız o stil öğesi ilk şey kapatın olun stil öğesi, tüm vücudu etkiler olduğunu sayfadaki eleman yapmak na body etiketi onun background-color: black ve bunu marjı vereceğiz 0 genellikle varsayılan çünkü sayfalar sol biraz üst bir marj alanı var Sağ ve isterseniz alt size Missouri piksel belirtebilirsiniz emin olmak için hiçbir marjları baz şimdi bu hedef oluyor orada menü çubuğu bu menü çubuğu kimliği kullanmak için Dave tarafından bu menü için kimlik etkileyecek Biraz içeride bağlantı elemanları yapmak için her ne kadar düğmeleri biz o yolu koymak zorunda değilsiniz Örneğin bir sınıf burada biz bunlardan her biri için sınıf koymak zorunda değilsiniz linkler biz sadece bu yana Menü çubuğunu ve hedef Bir el amanecer tüm çocukların up menü çubuğu Ben doğru sizi CSS böylece kolayca onları hedef olabilir vermek ve pound işareti kimlik ana hedefi tarafından hedeflemek istediğiniz belirtmek için Fikir açık / kapalı kaşlı yapacağız bu vereceksin menü çubuğu 24 piksel ve sınır özelliği istersen dolgu Sayfanın yaşayan bu menü çubukları artık bir renk verilmiş nerede görebilirsiniz dis gri 1 pixel kesik var sen orada menü çubuğunu hedefliyorsanız alabilir ve sonra bir daha satır aşağı gitmek ve menü çubuğu demek çocuk eleman şimdi buraya koymak istiyorum ne olursa olsun özellikleri olsun Bu seferde tüm bir unsuru hedef olabilir nasıl Onlar menü çubuğunda yaşıyor ben burada bazı özellikleri atalım Yaptığımız ilk şey font ailesini belirtin ve biz bunu bir yazı tipi boyutu vermek her düğme için bir arka plan rengi vermek ve bu düğme görünüm oluşturur ne Ayrıca bu şekilde, biz düğmeler yaşadım URL koyabilirsiniz arka plan olduğunu düğmeleri onlar sözler etraflarında bazı güzel Hıristiyan boşluk var olacak metin güzel bir açık gri rengini yapmak her biri yapacağız margin-right vereceksin: 10 piksel özelliği bu şekilde düğmeler Tüm yan birbirlerine tarafa hemen yanında yığılmış sahip oldukları bir Metin-decoration onlara arasındaki çift piksel: non kelimelerin bu şekilde hiçbiri altını ve border-radius var: sadece düğmeleri yuvarlak etkisi biraz vermek Bizim iyilik tarayıcıda bu hale şimdi eğer sen ne görebilirsiniz böylece yapabilirsiniz açlık durumunu cevap henüz vurgulu devlet var Sadece bu kural burada inmek ve daha sonra kolon koymak başladı kapmak Bir elemanın sonra liman bu doğru eleman istediğin hedef çünkü koca liman deyimi bu bir değişiklik içinde artık amaçlı hover için özellikleri biz sadece arka plan ve rengini değiştirmek için gidiyoruz her şey sen eğer çok daha fazla özelliklerini değiştirebilirsiniz aynı kalacak istemek ama bu ikisini değiştirmek ve kullanarak onları animasyon nasıl size göstereceğim Geçiş özelliği bu yüzden şimdi biz bu olsun, normal işlevsellik ne görelim animasyonlar olmadan Ben hemen o renge düğmenin üzerine gittiğinizde bakın ama biz sadece eklemek zorunda animasyonu pürüzsüz istiyorum tek satır yapacağız eklemek konum burada hi efendim ulaşmak için normal durumda vurgulu devlet düğme ve tüm büyük tarayıcılarda bir dakika Estes geçiş özelliği eklemek için gidiyoruz Şu anda siz tam olarak hangi tarayıcıları veya çalışıyor görebilirsiniz yapmak Bu standart özelliğini kullanarak genellikle WebKit önek moes görürsünüz p6 Internet Explorer için MS öneki ve biliyorum bütün opera önek ve OPP kullanmak zorunda demek diğer tarayıcılar hala opera için retakes % uh tüm modern versiyonları veterinerlik okulu veya krom Firefox anime geçiş standardize kullanarak çalışacak Syntex ve ben siz geçiş özelliği hakkında daha fazla bilgi edinebilirsiniz olacak gösterisi vardır ediyorum o HP geliştirmek nereye adamlar animasyon ne özellikleri hakkında karanlıkta değil ve burada özelliği içinde tüm özellikleri AK ve ne yapıyoruz düşman iki özellik arka plana kod koyarak ve renk üzerinde arka plan, böylece yarım saniye aslında onları 0,3 saniye içinde zayıf görünmesi olduğunu Arka plan doğrusal bir şekilde animasyon gidiyor ve 0,3 saniye içinde metne arayan da hareketlendirmek için gidiyor Ben istediğim herhangi bir gecikme istemiyorum bu yüzden doğrusal moda UTC 0 saniye gecikme anlamına gelir Anında gerçekleşmesi Arka plan ve şimdi renk hem en ne olsun bakalım için Şimdi ben de krom onun Google Chrome bu çalıştırmak kulüpler Ben şimdi var bu güzel animasyonlu etkisini görmek CDC Google Chrome standartlaştırmak özelliğini kullanıyor Onların geçiş önündeki WebKit koymak zorunda değilsiniz Şimdi artık WebKit öneki koymak Şimdi bu kontrol izin vermek zorunda değilsiniz Firefox ya Firefox için öneki kullanmak zorunda değilsiniz demek Firefox eski sürümlerini öneki kullanmak zorunda tamam şimdi Internet Explorer'da bu onay var hiçbir sorun ve ben hedeflemek istediğiniz eğer öyleyse Internet Explorer 10 kullanıyorum Muhtemelen koyarak kurtulabiliriz Internet Explorer 9 veya 8 ms burada ray ve eski sürümleri için çalışacaktır internet explorer var yani sadece emin sonra MS koymak ve yapmak Geçiş özelliği standart versiyon altında sözdizimi de tamam Bu yüzden biz eski sürümleri olmuştur konum I desteklediği inanıyorum yavaş Eğer önek kullanıyorsanız geçiş özelliği tam olarak emin değilim Şimdi operasının bu kontrol edelim yukarı kullandığımız eğer o serin animasyon özelliği yoktur canción opera bakın Ben sadece geçiş özelliği bu yüzden atalım Ms 20 değişiklikler şimdi ne olsun bakın Ben tarayıcı opera önizleme edeceğiz güzel şimdi bile opera pürüzsüz animasyonlar var böylece hedeflemek için bu önek nasıl kullanabileceğinizi gösterir yok herhangi eski tarayıcılar veya tarayıcılar Düzenli geçişi desteklemek mülkiyet, özellikle bazı tarayıcılar eski tarayıcıları sözdizimi Bu önekleri WebKit mose kızgın MS ve 0 İsterseniz sadece emin olmak istiyorsanız, tüm beş satır kendi koymak tüm bunları koymak ve ondan sonra onları altında düzenli geçiş sözdizimi koymak Eğer herhangi bir sorun I bu biftek bir daha bakmak zorunda bu çok güzel ve daki sayfasında çalıştığınızda olacak ona bakmak görmek ne kadar fazlasını yapmak animasyon kare hızı Video tür çünkü animasyon biraz dalgalı görünmesini sağlayabilirsiniz ama sana söylüyorum pürüzsüz caz geniş.

Açıklama

Ders Kodu: http://www.developphp.com/video/CSS/Pure-CSS-Animated-Menu-Button-Transitions Eğer CSS biliyor her türlü ve her animasyon-mümkün özellik hedef CSS3 geçiş özelliğini kullanarak kolayca düğmeleri animasyon öğrenin. Biz bir roll-over (mouseover) alın ve roll-out (mouseout) animasyon basit hover davranışını hedefliyoruz. (Örneğin tıklama davranışı gibi) daha kullanıcı etkileşimli davranışları hedef için uygulamalarınızda herhangi bir zamanda CSS3 geçiş özelliği kapalı yangınları JavaScript bir satır uygulayabilirsiniz.

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.5/10

  • 936
    Olumlu
  • 40
    Olumsuz
  • 217
    Yorum
  • 115923
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Android Developers

    Android Deve

    9 Kasım 2007
  • majesticdubstep

    majesticdubs

    3 Kasım 2011
  • PorterRobinsonVEVO

    PorterRobins

    11 Kasım 2013

ANKET



Bu sayfa işinize yaradı mı?