รับทําเว็บไซต์ รับทํา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