Anasayfa » Web Tasarımı » 38 İlham Verici CSS3 Animasyon Demoları

    38 İlham Verici CSS3 Animasyon Demoları

    CSS3'ün tanıtımından bu yana, olasılıkları ve kullanılabilirliği etrafında çok fazla sıcak tartışmalar yaşanıyor. Bununla birlikte, potansiyelini keşfetmek için el yapımı çok sayıda ilginç deney de bulunmaktadır. Herhangi bir yöntemle yapılan deneyler, CSS3'ün kullanılabilirliğini kanıtlamamasına rağmen, CSS3'ün gerçek olanaklarını, büyük geliştiricilerin CSS3'ün geleceğe inandığını bir dereceye kadar gösterdi..

    Bu doğru mu? Gözlerinle değerlendir. Bu vitrinde hiçbir şey göstermeyeceğiz, sadece 38 ilham verici CSS3 tabanlı animasyon gösterimi bu tamamen CSS3'ün gerçek potansiyelini keşfetmektedir. Saf deneylerin yanı sıra, daha tatlı ve daha seksi hale getirmek için CSS3'ün web tasarımına nasıl uygulanabileceğine dair bazı pratik örnekler göreceksiniz..

    Yeter dedi, fantastik CSS3 dünyasını keşfedelim!

    Ayrıca ilginizi çekebilir:

    • CSS3 için Başlangıç ​​Kılavuzu
    • Sallanan Bir CSS3 Arama Kutusu Oluşturma
    • HTML5 / CSS3 Web Sayfaları Oluşturma
    • CSS3'teki Zarif Ekmek Kırıntısı Gezinme Menüsü
    • Ajax Tabanlı HTML5 / CSS3 İletişim Formu Oluşturun
    • Tamamen CSS3 ile Üretilen 35 Grafik
    • Daha…

    Bu demoları Google Chrome'un Safari veya Geliştirici sürümünün en son sürümünü kullanarak izlemeniz kesinlikle önerilir. Demoların çoğu, en son Firefox ve Google Chrome sürümünü destekliyor..

    Animasyonlu 3D Helis

    Listede birincisi, Marcofolio.net tarafından CSS3 3D dönüşümleri kullanılarak yapılan inanılmaz bir animasyon. Animasyon sihrin kendisine benziyor, ancak aslında makaledeki öğretici ile benzer bir etki yaratmayı öğrenebilirsiniz!

    Animasyonlu Düğmeler

    Web tasarımcılığı için mutlaka görülmesi gereken bir yer; çünkü demo yalnızca CSS3 animasyonunun olanaklarını göstermez, aynı zamanda ilham için çok güzel ve pratik düğme efektleri sunar!

    Animasyon Menüleri

    Animasyon menülerinizi gerçekten havalı ve yaratıcı göstermeleri için renklendirmeye çalışıyor musunuz? Bu demo tam size göre.

    AT-AT Walker

    Gövde parçaları bulunan bir birimin canlandırılması konusunda CSS3'ün potansiyelini gösteren ilham verici bir animasyon demosu.

    Savaş alanı CSS3

    Çok sayıda patlama ve silah sesi olan Battlefield CSS3!

    Büyük Anlaşma

    Bu demoyu çok önemli yapan pürüzsüz ve hoş bir animasyon..

    Can Haz Ur İmleç?

    “Merhaba, ben İmleç Canavarıyım. Babamın sana bir mesajı var: 'Lütfen kullanmayın İmleç: yok, bir imleç yiyen canavarı yaratmazsanız hariç '.”

    CSS Dock

    Mac OS X’in dock'unu taklit eden seksi bir deneme.

    CSS3 Erkek

    Dikkat et, işte CSS3 adamı geliyor! CSS3 canlandırmasının gerçek potansiyelini göstermek için mükemmel bir örnek.

    Top Zıplayan Dribbble

    Biraz grafik hileci kullanımı ile güzel ve eğlenceli bir CSS3 animasyonu geliyor.

    Dulla

    Dulla, artık CSS3 ile de mümkün olan 2D platform oyunu oluşturmak için kullanılan en yaygın tekniklerden birini gösteriyor..

    Kare Animasyon ile Kare

    CSS3 ile kare kare animasyon? Sorun değil!

    Grafik Animasyonu

    Sitenizdeki grafiği göstermek / açıklamak için basit ama güçlü bir animasyon, yapmayı öğrenmek!

    Yüksek

    Google Arama’daki görüntüleri gerçek zamanlı olarak dinamik bir şekilde görüntüleyen ve görüntüleyen görüntüler şarkı sözlerini temel alan gizemli bir müzik animasyonu.

    Hover Etkileri

    Vurgulu etkinin geleceği CSS3 ile birlikte gelir. Şık ve umut verici.

    Ben Joseph Barrett.

    CSS3, portföy sitesinin sosyal medya simgelerine entegre edildi. Bu sadece eğlenceli değil, aynı zamanda tasarımcının yaratıcılığını göstermek.

    Sonsuz Yakınlaştırma

    Düzgün animasyon, ayrıca portföyünüzü göstermenin güzel bir yolu. 26 fotoğraf için toplam zoom 67108864: 1'dir.

    Kinect ve CSS3

    “14 gövde eklemi Xbox Kinect kullanılarak izlenir ve kısa bir CSS animasyonuna dönüştürülür. Vücut verileri animatable.com ile ayrıştırılıp CSS animasyonlarına dönüştürüldüğü tarayıcıya getirilir.”

    Matris

    Matrix kadar havalı olmak ister misiniz? CSS3 ile başarabilirsiniz.

    Morphing Küpleri

    Deneysel demo, 3D dönüşümleri, animasyonları ve geçişleri kullanarak CSS3'ü keşfetmeye başladı. Buradaki ilginç kısım, öğeler hala üzerinde dönüyor olsalar bile, öğelerdeki metni seçebilmenizdir..

    Güneş sistemimiz

    Artık öğrencilerin güneş sistemini keşfetmelerine yardımcı olmak için pahalı bağımsız yazılımlara ihtiyacınız yok.

    Duff Rulo

    “Mmmmmm… .Homer, hiç bitmeyen bir bira tedarikine bayılacak.”

    Poster Çemberi

    İlginç bir etki elde etmek için CSS dönüşümünü ve canlandırmasını nasıl kullanacağınızı gösteren basit ama ilginç bir örnek.

    Aziz Tehlike

    Kim gerçekten sevimli karakterlere ve eğlenceli animasyonlara sahip bir web sitesine dayanabilir?

    Rofox

    Sorunsuz ve eğlenceli animasyon, kendi başınıza denemek için kaynak kodunu alın!

    Koyun Shaun

    “Donanım hızlandırmalı HTML5 video, 3D CSS Dönüşümleri ve WebM ile oluşturulan etkileşimli bir deneme aracılığıyla Shaun ve arkadaşlarının 'An Ill Wind', 'Snowed In', 'The Big Chase' ve 'Twos Company' kliplerini izleyin.”

    uzay

    Belki uzay CSS3 için son sınırdır.

    Uzay CaCSS

    Bunun gibi büyülü bir etki yarat, CSS3 ile zor değil, çünkü sadece tekrar radyal gradyanlı ve Arka plan boyutlu yer. Makul miktarda tweaks varyasyonları mümkündür.

    Star Wars Taraması

    Yıldız Savaşları'nın açılışının etkisi! CSS3 kadar destansı.

    Etkileyici Web

    Etkileyici web yalnızca CSS3 ve tarayıcı desteği, referansı ve dokümantasyonu hakkında bilgi vermekle kalmaz aynı zamanda web sayfasında akıllara durgunluk veren bir CSS3 animasyonu da sunar..

    Mektup Başları

    İnsan yüzüne benzeyen, CSS3 ile mümkün olacağını düşünen bir gölge oluşturmak için türler kullanmak?

    Hollywood'dan Adam

    Bu çekici animasyonları sadece saf tipografi kullanarak hiç gördünüz mü? CSS3 ile de yapabilirsiniz..

    Planetaryum

    Planetaryumu keşfetmekle ilgili ayrıntılar içeren epik bir demo. SVG, JavaScript, HTML5, CSS3, yazı tipleri ve türleri dahil.

    Türü Yağmur

    “Modern bir tarayıcı kullandığınızı varsayarsak bugün için tahmin,% 100 Georgia yağmurlu.”

    Tipografi Etkileri

    Düğme, menü ve vurgulu efektlerin yanı sıra, CSS3 ile yaratıcı tipografi efektleri de elde edebilirsiniz. jQuery, aynı zamanda kelimelerin harflerini biçimlendirmek için bu demoda yer almaktadır..

    Andrew Hoyer ile Yürüyüş

    Hepsinden iyisi, ayrıca makalede Andrew Hoyer ile yürümeyi öğrenebilirsiniz!

    Wonder Webkit

    JavaScript Matrix kütüphanesi ile CSS3 3D dönüşümlerinin harika bir kullanımı. Kulağa teknik geliyor, ancak sonuç çok etkileyici.

    Zoetrope

    Zoetrope bununla mümkün olduğunda CSS3 ile başka neler yapamazsınız?

    yansıma

    İlham verici? Evet. Pratik? belki. Animasyon tekniği geliştirici ve animatör için her zaman kafa karıştırıcı bir konudur, çünkü gerçekten pürüzsüz, benzersiz ve şık bir animasyon üretmek için belirli bir bilgi seviyesi gerektirir. CSS3, animasyonu yapma olanağına sahip olsa da, bunun animasyon için uygun bir araç olduğu anlamına gelmez. Sonunda hala tercihinle ilgili olduğunu düşünüyorum, benim için olduğu gibi, araç projenin ihtiyaçlarına uygun olduğu sürece her ikisiyle de iyiyim..

    Bu CSS3 animasyonları hakkındaki düşüncelerin neler? Bu CSS3 animasyonları sadece deneyler olarak iyi midir, yoksa gerçek hayattaki web tasarımına da uygulanabilir mi? Her zaman olduğu gibi, konu hakkındaki değerli düşüncenizi memnuniyetle karşılıyoruz ve en sevdiğiniz CSS3 animasyon parçasını da bize bildiriniz.!

    Daha

    Sadece vitrin, gerçekten mi? Daha fazlasını elde etmeyi hak ettin! Aşağıda, Hongkiat'tan size, CSS3'ün rehberleri ve rehberleri bulunmaktadır.!