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.!