|
|
|
css ile animasyon yapimi 2
2. Ders
İlk olarak ve en önemli olan DOCTYPE, senin, doğru (X) HTML'e sahip olduğuna emin olur! Tarayıcıların bu çoğu olmadan uyumsuzluk problemlerinin bütün türlerine götürecek olan 'Gariplikler' biçimine atılacak. W3C QA — listeler, geçerli DTDs'ten, kullanılabilen geçerli DOCTYPES'in bir listesi var. XHTML1'den seç. 0 veya XHTML1. 1 bunlar olarak, bu biçimlendirme için daha uygundur. Ben, XHTML1'i kullanırım.
Şekiller fare üzerine getitildiğinde hareket etmeye başlar.
HTML'in bundan itibaren, on bir resimi canlandırdığı (Twelth şekli, ilk durağan şekil olacak)ı tutması için basit bir divi kullanabiliriz. Biz bir kez daha, bağlantılarda şekilleri öyle çevirmeye ihtiyaç duyacağız ki Internet kaşifi, kullanabilir : pseudo sınıfı havada durabilir.
(X), HTML'in, örneği:
| Kod: |
<div id="film" title="Flick animation">
<a id="f1" href="#nogo"><img src="../images/f1.jpg" title="frame 1" alt="frame 1" /><b>FRAME 1</b></a>
<a id="f2" href="#nogo"><img src="../images/f2.jpg" title="frame 2" alt="frame 2" /><b>FRAME 2</b></a>
<a id="f3" href="#nogo"><img src="../images/f3.jpg" title="frame 3" alt="frame 3" /><b>FRAME 3</b></a>
<a id="f4" href="#nogo"><img src="../images/f4.jpg" title="frame 4" alt="frame 4" /><b>FRAME 4</b></a>
<a id="f5" href="#nogo"><img src="../images/f5.jpg" title="frame 5" alt="frame 5" /><b>FRAME 5</b></a>
<a id="f6" href="#nogo"><img src="../images/f6.jpg" title="frame 6" alt="frame 6" /><b>FRAME 6</b></a>
<a id="f7" href="#nogo"><img src="../images/f7.jpg" title="frame 7" alt="frame 7" /><b>FRAME 7</b></a>
<a id="f8" href="#nogo"><img src="../images/f8.jpg" title="frame 8" alt="frame 8" /><b>FRAME 8</b></a>
<a id="f9" href="#nogo"><img src="../images/f9.jpg" title="frame 9" alt="frame 9" /><b>FRAME 9</b></a>
<a id="f10" href="#nogo"><img src="../images/f10.jpg" title="frame 10" alt="frame 10" /><b>FRAME 10</b></a>
<a id="f11" href="#nogo"><img src="../images/f11.jpg" title="frame 11" alt="frame 11" /><b>FRAME 11</b></a>
</div> |
|
|
Öğrencilerin Forum Sitesi