CSS Animation Examples - Tạo hoạt hình với CSS và html

Dưới đây là đoạn code tạo hoạt hình, các bạn tham khảo cho ý kiến:

<style type="text/css">

{width:485px; height:83px; background:#f00; margin:50px auto;}

a.pos1, a.pos1:hover {display:block; width:50px; height:83px; float:left;text-decoration:none;}
a.pos1 {background:#fff url(http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif) no-repeat; background-position:0 0;}
a.pos2, a.pos2:visited {display:block; width:50px; height:83px; float:left;text-decoration:none;}
a.pos2 {background:#fff url(http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif) no-repeat; background-position:-50px 0;}
a.pos3, a.pos3:visited {display:block; width:70px; height:83px; float:left;text-decoration:none;}
a.pos3 {background:#fff url(http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif) no-repeat; background-position:-100px 0;}
a.pos4, a.pos4:visited {display:block; width:70px; height:83px; float:left;text-decoration:none;}
a.pos4 {background:#fff url(http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif) no-repeat; background-position:-170px 0;}
a.pos5, a.pos5:visited {display:block; width:60px; height:83px; float:left;text-decoration:none;}
a.pos5 {background:#fff url(http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif) no-repeat; background-position:-240px 0;}
a.pos6, a.pos6:visited {display:block; width:80px; height:83px; float:left;text-decoration:none;}
a.pos6 {background:#fff url(http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif) no-repeat; background-position:-300px 0;}
a.pos7, a.pos7:visited {display:block; width:60px; height:83px; float:left;text-decoration:none;}
a.pos7 {background:#fff url(http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif) no-repeat; background-position:-380px 0;}
a.pos8, a.pos8:visited {display:block; width:45px; height:83px; float:left;text-decoration:none;}
a.pos8 {background:#fff url(http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif) no-repeat; background-position:-440px 0;}

a:hover {cursor:url(cursor.cur), url(cursor.csr), crosshair;}

a.pos1:hover {background-position:0 -83px;}
a.pos2:hover {background-position:-50px -83px;}
a.pos3:hover {background-position:-100px -83px;}
a.pos4:hover {background-position:-170px -83px;}
a.pos5:hover {background-position:-240px -83px;}
a.pos6:hover {background-position:-300px -83px;}
a.pos7:hover {background-position:-380px -83px;}
a.pos8:hover {background-position:-440px -83px;}


.ip111 {
    cursor:url(cursor.cur), url(cursor.csr), crosshair;
    background-image: url('http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif');
    background-repeat: no-repeat;
    height: 75px;
    background-position: 0px -92px;
   
   
}
.ip113 {
    cursor:url(cursor.cur), url(cursor.csr), crosshair;
    background-image: url('http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif');
    background-repeat: no-repeat;
    height: 75px;
    background-position: -50px -92px;
       
}
.ip114 {
    cursor:url(cursor.cur), url(cursor.csr), crosshair;
    background-image: url('http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif');
    background-repeat: no-repeat;
    width: 90px;
    height: 75px;
    background-position: -100px -92px;
       
}
.ip115 {
    cursor:url(cursor.cur), url(cursor.csr), crosshair;
    background-image: url('http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif');
    background-repeat: no-repeat;
    height: 75px;
    background-position: -170px -92px;
       
}
.ip116 {
    cursor:url(cursor.cur), url(cursor.csr), crosshair;
    background-image: url('http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif');
    background-repeat: no-repeat;
    height: 75px;
    background-position: -240px -92px;
       
}
.ip117 {
    cursor:url(cursor.cur), url(cursor.csr), crosshair;
    background-image: url('http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif');
    background-repeat: no-repeat;
    height: 75px;
    background-position: -300px -92px;
       
}
.ip118 {
    cursor:url(cursor.cur), url(cursor.csr), crosshair;
    background-image: url('http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif');
    background-repeat: no-repeat;
    height: 75px;
    background-position: -380px -92px;
       
}
.ip119 {
    cursor:url(cursor.cur), url(cursor.csr), crosshair;
    background-image: url('http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif');
    background-repeat: no-repeat;
    height: 75px;
    background-position: -440px -92px;
       
}
.ip112{display: block;}
.cont { height:83px; background:#f00; margin:50px auto; background-image: url(http://i465.photobucket.com/albums/rr14/hunglxh/streaky.gif);width: 485px; }
</style>

<!-- Code CSS khong javascript -->

<a href="#" class="pos1">&nbsp;</a><a href="#" class="pos2">&nbsp;</a><a href="#" class="pos3">&nbsp;</a><a href="#" class="pos4">&nbsp;</a><a href="#" class="pos5">&nbsp;</a><a href="#" class="pos6">&nbsp;</a><a href="#" class="pos7">&nbsp;</a><a href="#" class="pos8">&nbsp;</a>

Demo:

        

Chủ đề: Html tips