5 HAZİRAN 2013, ÇARŞAMBA

Css3 Ana Kareler Animasyon Eğitimi Yüzen Eleman Gölgeler

Kankaları howdy sen görmek istediğini bana ifade son yapılan bir gerçeği gölge kayan eleman animasyon nasıl video Ben bu isteği karşılamak için çok mutlu Sizler bunu bana sorulduğunda ben neredeyse benim kot kremalı Tanrım tamam bu bitmiş ürün nasıl öğrenme gerektiğini animasyon Program bugün ve web sitenizde biraz daha yumuşak ve temiz olacak akılda tutmak Yerel makine zaman test Sadece dalgalı görünebilir benim videoları düşük kare hızı nedeniyle Gördüğünüz o cam gibi pürüzsüz makinenizde çalıştırdığınızda bana güven tereyağlı Ben sadece bu yüzden herkes CSS3 de basitlik görebilirsiniz yapacağız yerd

e konum animasyon programlama iş akışı hala biz normalde koymak istiyorsunuz gibi ilk normal gibi sayfadaki öğeleri Bir web sayfasında şey sonra onları animasyon hakkında ayarlarsınız tamam ilk en burada ile başlıyo

ruz konuşalım Biz son video ile kapalı bitti temelde ne ile yola çıkıp Bizim sayfadaki elemanı altında gölge etkisi yarattı zaman Biz onun devam böylece başımı vardı ne bir göz atın satmak istedim Orada ve Miley

“Ders Kodu: http://www.developphp.com/video/CSS/keyframes-Animation-Tutorial-Floating-Elements HTML5 web sayfasında bir animasyon yüzen elemanı altında animasyonlu...”
Adam Khoury

sayfasında yüzen o yüzen görünmesi için Ben bunun altında etkileyecek oval gölgesinde yerleştirdiğiniz Eğer hiçbir şey animasyon var ama her şey sadece hala orada oturuyor görebilirsiniz Bu normalde ben bir web sayfası CZ şeyler koymak istiyorum nasıl benim konteyner Bunu ancak konteyner diyoruz ve ben bot var içinde yaptım ve kafam nerede bot gölge yaptım ama olanını yaptım Şimdi bunun için en CSS bir göz atalım ve biz bisiklet kabı var Ben bu kabın üzeri

Css3 Ana Kareler Animasyon Eğitimi Yüzen Eleman Gölgeler Resim 1 Css3 Ana Kareler Animasyon Eğitimi Yüzen Eleman Gölgeler Resim 2 Css3 Ana Kareler Animasyon Eğitimi Yüzen Eleman Gölgeler Resim 3 Css3 Ana Kareler Animasyon Eğitimi Yüzen Eleman Gölgeler Resim 4

ne size aa sınır göstereceğiz ve bunu benzediğini görebilirsiniz sevmek Kırmızı 1 piksel almak ve kesik olabilir Birçok tarayıcıda sınır görebilirsiniz görmek işlemek O elemanın etrafında onunla 285 var 420 yükseklik marjı 0 piksel Otomatik tarayıcı penceresinde ortalamak 80 piksel Üst ve alt kenar boşluğu ve oto Sağ ve sol kenar boşlukları için dışarı merkezleri ve sen görebiliyorum ben sadece Bunun etrafında sınır koymak olacak Ben sadece istediği geri o sınır çekmek Siz tam yerini görmek için ama yaptılar şimdi bu sefer

kim bot sahip Bunun yerine son kod varmış gibi bir video sahip biz iframe burada gerçek bir YouTube video ve biz buna bir gölge yerleştirerek edildi ama biz sadece kalacaksın bu kez burada yaptım koymak ve biz onun arka plan görüntüsü eşit hale getirmek için gidiyoruz benim büyük yüz yeni bir şey ama istediğiniz onların ve ben sadece adını ancak böylece o yerde istediğiniz her şeyi atabilir bu yüzden sadece bu unsur onlar olabilir istediğiniz herhangi bir şey olabilir aklınızda bulundurun Video sürece bu içinde senin iframe dediği gibi yaptım size video sayfası üzerinde yüzer ve sonra sadece arka plan özelliği kaldıracaktır ama ben bir etrafında bir görüntü yüzer çünkü ben bir arka plan özelliğine sahip bunu içinde ve aslında görüntü etiketinde sopa Ben Adem'i koyarsanız ve aynı etkiye sahip PNG ama sadece bir arka plan görüntüsü kullanabilirsiniz vermedi bu görüntü etiketi hakkı kendini yaptım ve orada görüntü koyacağız bu yüzden benim görüntüyle aynı boyutlara sahip did yapılan ve ben onun üst özelliği 20 piksel dedi ve ben bir birikimi verdiğinizden emin yaptı % uh animasyon amaç için göreli öylesine bir birikimi ve göreli vermek Ben bir şey davayı animasyon istediğimde ya da mutlak oldukça önemlidir İşten G animasyonları görebilirsiniz unutmayın Eğer öğeleri sanat eğer bazı durumlarda unsurları iseniz akraba ya da kesinlikle emin senin konumlandırma set yapmak öylesine yerleştirilmiş yakınlarına Canlandırmak istediğiniz herhangi bir öğe için mutlak Bazı bu bot ve bunlara bot gölge yeni CBO konumuna bir dizi yapılmış göreli artık bot gölgeler aynı şekilde kurmak biz hariç son video kurmak şimdi donukluk eklendi animasyon başladığında gerçekten şeffaf hale getirmek için ve ben yapacağım animasyon ilerledikçe o kadar karartmış Ben de daha geniş dedim yüzden bu yüzden kazanacağız ediyorum marj alanı yüzden marjları baz herşey 20 Ben gidiyorum çünkü dedi büzüştürülebilen genleşmiş animasyon bunun için daha sonra üst özelliğini çalışır gibi o olacak demektir göreceli konumlandırma beri 100 piksel 100 piksel Bach altında size verdiği tüm başlayacak buydu ve Bu tamam şimdi en yola izin oa film animasyon ana karelerin animasyonlar kullanmak için Siz PHP nokta com geliştirmek giderseniz CSS görürsünüz Tüm öğrenebilirim ben css3 özelliği referanslara sahip kütüphane kare animasyonlar derinlemesine daha fazla bilgi edinmek istersen hakkında anahtar kare animasyonlar programlamak ve aynı zamanda animasyonlar geçiş nasıl ve şimdi tüm bu tetiklemek konusunda videoları bir sürü yapıyorum Böyle javascript ve malzeme kullanarak animasyonlar ama bu bir zaman herhangi bir JavaScript azaltabilir ve sahip tüm yapmak kreatin sonsuz animasyon çalışan bir anahtar kare animasyon sonsuz yüzden sadece kendi çalıştırmak istediğiniz animasyonlar olduğunda Bizim kullanıcı başlatılan animasyonlar istediğinizde kare animasyonlar kullanabilirsiniz Eğer geçişler kullandığınızda etkileşimli kullanıcı işte ve o css3 geçişler tetikleyen javascript biz sadece zorunda gidiyoruz nasıl tüm eserlerini ama beri var yani kullanarak Kullanıcı bu başlatılan değil bir animasyon öylece kendi üzerinde çalışan Ben eğlenceli bir kare anahtar kare animasyon kullanmak için gidiyorum Ayrıca animasyon o öylece tutmak var sonsuz bir döngüye olacak çünkü animasyon çalışan Ben bu yüzden olacak bot şamandıra yapmak için ana kare animasyonlar eklemek ediyorum Sonunda, bir video dakikalık doğru WebKit öneki kullanarak duyuyorum tüm tarayıcılarda çalışmasını sağlamak için nasıl hakkında konuşmak çocuklar ve gelecekte sadece WebKit tabanlı tarayıcılar hepimiz önekleri kaldırabilirsiniz değil ve sadece herhangi bir önek olmadan böyle kareleri çalıştırmak ama şimdi biz önek kullanmak zorunda ve ne kadar basit görmek çok zor değil Bu eklemektir önekler burada ne olduğunu yapıyoruz şimdi tüm tarayıcılarda çalışmasını sağlamak için Biz bir anahtar kare yolluyoruz animasyon çağrı bot akışı ve istediğiniz ne olursa olsun isim olabilir ve bu animasyon sadece iki anahtar kareler vardır ve ben 50 ve yüzde 100 yüzde söyledi Eğer gitmek HP kullanabileceğiniz görmedim geliştirmek için bilgileri kontrol gelen ve Burada bu sayılar ve birkaç kullanmak, böylece yerine sadece gidiş animasyon anahtar karelere sahip ya da yüzde elli yüzde 100 kullanabilirsiniz ön içinde var sağlayacak değil Eğer top animasyon animasyon mantığı 100 piksel gelen Üst 0 nedenle temelde bu animasyon olduğunu animasyon ayarlanır Başladıktan en üst pozisyona 0 o bot sonra tekrar pozisyon 100 top ve bu anahtar kare animasyon kravat için şimdi öyle hepsi size kurmak Burada bu eleman biz sadece referans koymak Islak kiti animasyon olarak elemanı böylece animasyon özelliğini kullanarak ve gelecekte dediğim gibi hepimiz kaldırabilirsiniz önekler daha adil gibi o var Şimdi bir önek kullanacağız ama animasyon özelliği gibi ayarlanır Biz anahtar kare animasyon burada bot şamandıra animasyon belirtilen bu yüzden çalıştırmak için belirtilen ve biz kullanmak için gidiyoruz Burada doğrusal olabilir doğrusal olarak yerine kolaylığı kolay ve şimdi kolaylık dışarı kolaylaştırabilir ya da sadece kolaylığı ve ben bu durumda düşündüm eğer iyi kullanım animasyon kolaylığı iki saniye boyunca gerçekleşecek gidiyor sonsuz yüzden bu hız iki saniye gibi ve o animasyon çalışacak sonsuz olacak döngü gidiyor sonsuz sen ben koyarsanız o kadar isterseniz burada bir sayısını ayarlayabilirsiniz Burada beni orada üç koyalım Eğer baş yukarı ve bir aşağı gider görüyoruz üç ve sonra durur ama sonsuz olmak istiyorum Benim tarayıcıda bu çalıştırırsanız şimdi sadece gidiş ve gidiş ve devam edeceğiz o durdurmak asla Ben sadece koymak olabilir burada 10 anahtar kare olmasını istiyorsa şimdi ne Yüzde 10 yüzde yirmi yüzde otuz tüm yol yüz kırk yüzde yüzde ve bu beni 10 kareleri verecek Ben sayfada etrafında o eleman taşıyabilirsiniz her yerde herhangi bir yöne istiyorum tamam tekrar bu kısaca bir göz atalım Şimdi bu biraz daha gerçekçi biz almaya gidiyoruz görünmesi için genel veya eliptik gölge etkisi biz sadece bir hala son video yapılan animasyon yukarı ve aşağı sallanan oluyor bu kafa ile karşılık zaman gölge sayfa yani gölgeli altında başka kural koymak için gidiyorum olduğunu O Shadow kare animasyonlar olduğunu bu yüzden tepki biz başka anahtar kare animasyon buraya kurdunuz ve aynı zamanda en önde gidelim ve anahtar kare animasyon olduğunu bağlı şimdi iki anahtar kareler vardır O elemanın ama gölge nereye görebilir gölge bağlama bu elemanın ve gölge tepki tepki biz burada kurulan bizim anahtar kare animasyon bu gönderme idi Sonsuz yanı sıra iki saniye kolaylaştırmak ve biz bu animasyon içinde ne yaptığınızı Biz normal marj uzaydan alıyorsun olduğunu 0 piksel ve kenar boşluğunun bu değiştiriyoruz Yüzde 20 yani temelde geniş olmaktan alacağım daha dar gölge küçük olma o marj uzayda bastırıyor çünkü küçük elips sol ve sağ yani marj özelliği doku top var çalışır Sağ alt sol çok doğru ve bir hem yüzde 20 olarak ayarlanmış görebilirsiniz sol ve donukluk yüzden yükselmeye devam ediyor biraz bekleyin donukluk .7 yapabilirsiniz Gölge zaman koyulaşır Büyük kafası yüzden yere yakın olduğunda gerekli o başlar ama gölge biz o kadar tek donukluk atama ayarladığınızda o ancak sadece görünür değil adayı animasyon yapacağımız bu eğlenceli gitmek yapmak başlıyor ancak sadece görünür daha görünür ve daha koyu Diğer yandan görünüm animasyon ikinci kare yani size geri normal durumuna oldukça fazla oluyor getiriyor normal durumuna den istediğin ne olursa olsun devletin bunu animasyon gitmek yapmak bu yüzden şimdi gördüğünüz ne sopa Şimdi biz bu gölge biraz daha gerçekçi bir etkiye sahip Bizim yüzen elemanı altında şu ve önümüzdeki orada aydınlatma eğer sen-cekti istemek biraz mantık var yukardan bu kafa orada yaklaşık yakıyordu güneşli bir günde ya da her neyse olduğunu söylüyorlar Buraya bu küçük daire başkanı yaklaşırken koyu alacağı başkanı olarak baz veya zemin göğe yükselir çakmak o fade out başlamak istiyorum gölge alacağı ve çok daha geniş olacaktı Şimdi dediğim gibi geleceği şimdi aptal önekleri hakkında konuşalım Bu WebKit öneki olmadan böyle bu animasyonlar çalıştırmak mümkün olacak İşte ve burada sadece o gibi görünüyordu ve o çalışma olacak Tüm ortamlarda ama şimdi tüm tarayıcılar yazılım biz ne demek istediğimi en üstünde gidelim sana göstermek için öneki kullanmak zorunda İşimi önizleme krom kullanıyorum Firefox'ta bu önizleme Eğer hiçbir animasyon olsun Firefox görebilirsiniz Ben sadece yapmak zorunda değişimdir elemanları kadar bu olsun Firefox'ta çalışıyor sen olduğunu göreceksiniz moes için WebKit ama sen gerçekten istiyorum hepsini sahip orada gerçekten sadece istemiyorum bunların yerine Şimdi bana Firefox önizleme dosyası izin Şimdi benim animasyon Firefox'ta çalışan görürsünüz ama şimdi çalışan krom para çalıştırmak için gitmiyor Ben WebKit öneki kaldırmak çünkü artık Inc yanlış çalışmıyor Ben değiştirirseniz şimdi ne bu Mos Def MS değiştirildi çoğu MS ve kütle MS şimdi en bu çalışmasına izin Internet Explorer CBC, biz animasyon olsun ve biz de Internet Explorer'da istiyorum sürece biz MS öneki olduğunu, ancak şimdi biz önizleme dosyası ise kullandıkça Biz en kaldırıldı, çünkü Firefox artık çalışıyor gitmiyor önek böylece her üç Ne eklerim yapmak ve ondan sonra eklemek standartlaştırmak sözdizimi şu an neye benzediğini göstermek değil tamam bu yüzden ben animate kazandı her eleman için görebilirsiniz Ben sadece ana kareyi çalıştırmak istediğiniz animasyonu belirtmek zorunda Ben kullanarak belirttiğiniz animasyon önek WebKit mose ms ve sonra standart Ben bu altında Syntex ve gerçek kare animasyon kendisi için aynı Eğer WebKit benler ms ayarlamak zorunda ve daha sonra ana kareler standart formatı sözdizimi ve bundan sonra bot gölge için aynı şeyi yaptı Temelde gelişebilir böylece önek eklendi ne olursa olsun sizin gibi bir tarayıcı favori ne olursa olsun, Firefox en iyi çalışan seviyorum eğer gelişmekte animasyonlar yaratabilirsiniz her şey Eğer halka serbest bırakmak için hazırsınız sen halletmek en öneki kullanarak Sadece WebKit ms ve diğer önek olarak emin olun olduğunu ben Syntex standart koymak alt gelecekte olacak ne olduğunu, çünkü Tarayıcı Chrome'da bu dosya önizleme böylece kullanılan tamam o yıllar emin olun kurtarmak biz animasyon var Önizleme tarayıcısı Firefox iyi görünümlü tarayıcısı Internet Explorer'da önizleme IE iyi görünüyor ve aynı zamanda var Safari'de önizleme ve eklemek için gitmiyorum Biraz adamcağız Opera tarayıcısını sevmiyorum opera çünkü opera öneki Neyse ben ölür umut biz karışıklık var ve bu da çalışması gerekir yeterli tarayıcılar ise Apple cihazları için mobil cihazda tarayıcılar dedi Android cihazlar bitiş üründe bir kez daha göz atın Tamam ben siz bu anahtar kareler animasyon programlama dersi CSS3 beğeneceğinizi umuyoruz ve sadece iki anahtar kare olması zorunda değilsiniz kare animasyonlar hatırlıyorum animasyonlar 20 kareleri istiyorsanız 10 kareleri olabilir Sorunsuz buraya animasyonlu 28 Bu kafa sayfada buraya başlayabileceğini ve daha sonra bu köşede daha sonra bu köşede aşağı animasyon ve daha sonra tekrar orijinal noktaya sürece dört anahtar kareler henüz kurulmuş olarak İlk kare buraya buradan getirecek Üçüncü kare buradan için orada duymak burada, ikinci kare olmak İşte ve daha sonra dördüncü ana kare orijinal konumuna geri buradan getiriyor yapabilirsiniz o sonsuz döngü döngü sonsuz ya da sadece, ancak birçok kez İstediğiniz 12 kez çalıştırabilirsiniz Tamam ama unutmayın bir ben kontrol edebilirsiniz Animasyon kare mülkiyet animasyonlar ve tüm bu şeyler için bilgi CSS3 ile geliştirmek, HP kütüphanesinde bilgi ve orada pek çok örneği var da örnekler var mülkiyet programlama geçiş ve unutmayın İki farklı at animasyonlar ve geçiş animasyonları ve css3 kare işler animasyonlar istediğiniz zaman kare animasyonlar kullanmak Kendi üzerinde çalıştırmak için ve kullanıcı başlatılan animasyonlar istediğiniz zaman kullanabilirsiniz geçiş yerine animasyon özelliğinin özelliği ve size geçiş özelliği tetikler JavaScript sadece tetik mekanizması olarak JavaScript kullanabilirsiniz temelde bakın kullanarak etkileşimli kullanıcı olmak istiyorum çalıştırılacak CSS3 geçişleri yapmak.

Açıklama

Ders Kodu: http://www.developphp.com/video/CSS/keyframes-Animation-Tutorial-Floating-Elements HTML5 web sayfasında bir animasyon yüzen elemanı altında animasyonlu eliptik gölge işlemek için bazı CSS3 anahtar kare animasyon mantığını öğrenin.

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

  • 228
    Olumlu
  • 2
    Olumsuz
  • 42
    Yorum
  • 21724
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • ItZWaffleS420

    ItZWaffleS42

    9 EYLÜL 2011
  • Snazzy Labs

    Snazzy Labs

    9 Aralık 2008
  • UlyssesForever's channel

    UlyssesForev

    28 ŞUBAT 2012

ANKET



Bu sayfa işinize yaradı mı?