รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

CSS3 กับการสร้างภาพเคลื่อนไหวอย่างง่ายๆ

    CSS3 Animation จะรองรับเว็บบราวเซอร์เวอร์ชั่นใหม่ๆ ของ Google Chrome,Firefox,Opera,Safari เป็นต้น ใครที่ยังใช้ IE6-7 อัพเดทด่วนเลย เพราะคุณจะไม่ได้สัมผัสถึงความสามารถที่เหนือชั้นของมัน

     

    นการสร้างภาพเคลื่อนไหวด้วย CSS3 นั้นมีข้อดีในตัวของมันคือ ไม่กินทรัพยากรพื้นที่มาก และไม่ต้องติดตั้งปลั๊กอินเพิ่มเติม เหมือน Flash ทำให้ลดปัญหาเรื่องนี้ไปได้ แต่ก็มีข้อจำกัดของมันในการสร้างและแสดงผล

     

     

     

    CSS

    #box

    {

    width:100px; /* ความกว้าง */

    height:100px; /* ความสูง */

    background:#08CDD8; /* Code สี ที่ต้องการ */

    position:relative;

    animation:mymove 5s infinite;

    -moz-animation:mymove 5s infinite; /*สำหรับ Firefox */

    -webkit-animation:mymove 5s infinite; /* สำหรับ Safari และ Chrome*/

    -o-animation:mymove 5s infinite; /*สำหรับ Opera*/

    }

     

    @keyframes mymove

    {

    from {left:0px;}

    to {left:200px;}

    }

     

    @-moz-keyframes mymove /*สำหรับ Firefox */

    {

    from {left:0px;}

    to {left:200px;}

    }

     

    @-webkit-keyframes mymove /* สำหรับ Safari และ Chrome*/

    {

    from {left:0px;}

    to {left:200px;}

    }

     

    @-o-keyframes mymove /*สำหรับ Opera*/

    {

    from {left:0px;}

    to {left:200px;}

    }

     

    HTML

    <div id="box"></div>

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com