ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 9 CSS3 Animations ตอน 1
   CSS3 Animations คือการสร้างภาพเคลื่อนไหว (Animations) โดยไม่ต้องใช้ Flash animations และ  JavaScripts โดยในการสร้างภาพเคลื่อนไหวนั้นต้องใช้คำสั่ง @keyframes  (CSS3 Animations ไม่สามารถใช้กับ Internet Explorer)
ตัวอย่าง
   1.Animations แบบเคลื่อนที่ในทิศทางต่างๆ ตัวอย่างเช่น

<html>
    <head>
        <style>
div
{width:100px;
height:100px;
background:pink;
position:relative;
animation:mytest 5s infinite;
-moz-animation:mytest 5s infinite; /*Firefox*/
-webkit-animation:mytest 5s infinite; /*Safari and Chrome*/
-o-animation:mytest 5s infinite; /*Opera*/}
 
@keyframes mytest
{from {left:0px;}
to {left:400px;}}
 
@-moz-keyframes mytest /*Firefox*/
{from {left:0px;}
to {left:400px;}}
 
@-webkit-keyframes mytest /*Safari and Chrome*/
{from {left:0px;}
to {left:400px;}}
 
@-o-keyframes mytest /*Opera*/
{from {left:0px;}
to {left:400px;}}
</style>

<p> This example does not work in Internet Explorer.</p>
 
    </head>
    <body>
        <div><center>Hello Nerd</center></div>
    </body>
</html>

ผลลัพธ์คือ

ดูตัวอย่างที่ 3 คลิกที่นี่

คำอธิบาย
{width:ความกว้างของสี่เหลี่ยม;
height:ความสูงของสี่เหลี่ยม;
background:สีของรูปสี่เหลี่ยม;
position:relative; (ใส่คำสั่งนี้เพื่อให้สี่เหลี่ยมมีการเคลื่อนที่)
animation:mytest เวลาที่รูปสี่เหลี่ยมใช้ในการเคลื่อนที่ (ในตัวอย่างใช้เป็น 5s ซึ่งหมายถึง 5 วินาที) infinite; 
(สำหรับในคำสั่งนี้ หากไม่ต้องการให้รูปสี่เหลี่ยมมีการเคลื่อนที่ซ๊ำไปซ๊ำมา ก็ให้ลบคำว่า infinite ออก

-moz-animation:mytest 5s infinite; /*Firefox*/
-webkit-animation:mytest 5s infinite; /*Safari and Chrome*/
-o-animation:mytest 5s infinite; /*Opera*/}

โดย -moz- เป็นของ Firefox  -webkit- เป็นของ Safari and Chrome  และ -o- เป็นของ Opera

@keyframes mytest
{from {left:ตำแหน่งเริ่มต้นเคลื่อนที่;}
to {left:ตำแหน่งสิ้นสุดการเคลื่อนที่;}}

ในตัวอย่างคือเคลื่อนที่
เริ่มจากตำแหน่ง 0px และ สิ้นสุดที่ตำแหน่ง 400px
คำสั่ง left คือเคลื่อนที่จากซ้ายไปขวา สามารถเปลี่ยนเป็น
bottom (เคลื่อนที่จากล่างขึ้นบน) , top (เคลื่อนที่จากบนลงล่าง) และ  right (เคลื่อนที่จากขวาไปซ้าย) ได้ เพื่อเปลี่ยนทิศทางการเคลื่อนที่

2.
Animations แบบเปลี่ยนสี ตัวอย่างเช่น

<html>
<head>
<style> 
div
{width:100px;
height:100px;
background:pink;
animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera */}

@keyframes myfirst
{from {background:pink;}
to {background:blue;}}

@-moz-keyframes myfirst /* Firefox */
{from {background:pink;}
to {background:blue;}}

@-webkit-keyframes myfirst /* Safari and Chrome */
{from {background:pink;}
to {background:blue;}}

@-o-keyframes myfirst /* Opera */
{from {background:pink;}
to {background:blue;}}
</style>
</head>
<body>

<p> This example does not work in Internet Explorer.</p>

<div><center>Hello Nerd</center></div>

</body>
</html>

ผลลัพธ์คือ

ดูตัวอย่างที่ 4 คลิกที่นี่

คำอธิบาย
{width:ความกว้างของรูปสี่เหลี่ยม;
height:ความสูงของรูปสี่เหลี่ยม;
background:สีของรูปสี่เหลี่ยม;
animation:myfirst เวลาที่ใช้ในการเปลี่ยนสี
ในตัวอย่างใช้เป็น 5s ซึ่งหมายถึง 5 วินาที) infinite; (สำหรับในคำสั่งนี้ หากไม่ต้องการให้รูปสี่เหลี่ยมมีการสีซ๊ำไปซ๊ำมา ก็ให้ลบคำว่า infinite ออก

-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera */}

โดย -moz- เป็นของ Firefox  -webkit- เป็นของ Safari and Chrome  และ -o- เป็นของ Opera

@keyframes myfirst
{from {background:สีเริ่มต้น;}
to {background:สีสุดท้าย;}}

ในตัวอย่างคือเริ่มต้นจากสีชมพู แล้วค่อยๆเปลี่ยนเป็นสีน้ำเงิน


อ่านเพิ่มเติม
บทที่ 9 CSS3 Animations ตอน 2
บทที่ 9 CSS3 Animations ตอน 3

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q :ต้องการให้ listbox selected จากรายการที่เคยคำนวนระยะทางมาก่อนแล้วใน Joomla
โดย Parichat จ 19 ก.พ. 2018 3:32 pm บอร์ด Joomla Development
10
36
จ 19 ก.พ. 2018 4:36 pm โดย Parichat
Remote & Local Image Manager(รีโมทแอนโลคอลอิมเมจเมเนเจอ)-Component จัดการไฟล์ภาพและสื่อบนโฮสต์ FTP ภายในและระยะไกล
โดย Parichat จ 19 ก.พ. 2018 2:13 pm บอร์ด Joomla Extension Review
0
2
จ 19 ก.พ. 2018 2:13 pm โดย Parichat
ช่วยด้วยค่ะติดตั้ง component ที่ดาวโหลดมาไม่ได้ค่ะ
โดย Parichat จ 19 ก.พ. 2018 12:28 pm บอร์ด Joomla Development
2
9
จ 19 ก.พ. 2018 1:45 pm โดย Parichat
Android ดึงข้อมูล Json จาก Web server มาใส่ใน app ไม่ขึ้น แต่เรียกดูผ่าน Web browser ขึ้น
โดย Anonymous จ 19 ก.พ. 2018 12:02 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
0
3
จ 19 ก.พ. 2018 12:02 pm โดย บุคคลทั่วไป
วิวัฒนาการของ Ram กับ Liverpool
โดย Before Dong จ 19 ก.พ. 2018 10:55 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
จ 19 ก.พ. 2018 10:55 am โดย Before Dong
เจอปัญหา เข้าเมล roundcube ไม่ได้ เจอ Error connection to storage server failed
โดย mindphp อ 18 ก.พ. 2018 7:16 pm บอร์ด Linux - Web Server
0
10
อ 18 ก.พ. 2018 7:16 pm โดย mindphp
แก้ปัญหา ส่งเมลไม่ออก Roundcube: SMTP Error (-1): Connection to server failed.
โดย mindphp อ 18 ก.พ. 2018 6:16 pm บอร์ด Linux - Web Server
1
4
อ 18 ก.พ. 2018 6:35 pm โดย mindphp
ปัญหาเมล Mail Server exim Start ไม่ขึ้น บน Ubuntu
โดย mindphp อ 18 ก.พ. 2018 5:40 pm บอร์ด Linux - Web Server
1
4
อ 18 ก.พ. 2018 5:46 pm โดย mindphp
โหลดไฟล์ joomshopping ไม่ได้
โดย Jao SaCk อ 18 ก.พ. 2018 4:33 am บอร์ด Joomla Development
3
11
จ 19 ก.พ. 2018 3:58 am โดย mindphp
ช่วยด้วยค่ะหนูต้องการให้ตั้งเงื่อนไขให้เอาค่าdefaultที่เลือกอยู่ใน listbox มาแสดงเป็นข้อความหนูต้องทำอย่างไรค่ะ
โดย Parichat ส 17 ก.พ. 2018 11:11 pm บอร์ด Joomla Development
5
48
จ 19 ก.พ. 2018 2:45 pm โดย Parichat
อยากทราบคำสั่งสำหรับวนลูปในการคลิกเลือกหน้าถัดไป
โดย Panchalee ส 17 ก.พ. 2018 6:40 pm บอร์ด Programming - C/C++ & java & Python
1
36
จ 19 ก.พ. 2018 10:52 am โดย thatsawan
วิธีการติดตั้งเวอร์ชั่น php ในโปรแกรม Laragon
โดย Parichat ส 17 ก.พ. 2018 6:31 pm บอร์ด PHP Knowledge
0
27
ส 17 ก.พ. 2018 6:31 pm โดย Parichat
ปัญหาเรื่องบทความComponent, Module และ Plug in แตกต่างกันอย่างไร
โดย alisa93 ส 17 ก.พ. 2018 11:33 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
26
ส 17 ก.พ. 2018 2:27 pm โดย mindphp
ปัญหาเรื่องบทความ Joomla Extension
โดย alisa93 ส 17 ก.พ. 2018 10:56 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
37
จ 19 ก.พ. 2018 10:09 am โดย alisa93
Selenium : คำสั่งสำหรับเช็ค Error ความสมบูรณ์ที่หน้าเว็บ
โดย Panchalee ศ 16 ก.พ. 2018 3:53 pm บอร์ด Software testing
0
23
ศ 16 ก.พ. 2018 3:53 pm โดย Panchalee
การสร้าง URL ให้แสดงทั้งไอดีทั้งจังหวัดต้องทำอย่างไรค่ะ
โดย Parichat ศ 16 ก.พ. 2018 2:40 pm บอร์ด Joomla Development
1
29
ศ 16 ก.พ. 2018 2:50 pm โดย tsukasaz
การสร้าง URL ให้แสดงทั้งลิ้งทั้งจังหวัดต้องทำอย่างไรค่ะ
โดย Parichat ศ 16 ก.พ. 2018 2:39 pm บอร์ด Joomla Development
3
38
ศ 16 ก.พ. 2018 3:23 pm โดย Parichat
อยากทราบคำสั่งสำหรับการเช็ค Error ในกรณีที่หน้าเว็บโหลดขึ้นไม่ครบ
โดย Panchalee ศ 16 ก.พ. 2018 2:14 pm บอร์ด Programming - C/C++ & java & Python
1
29
ศ 16 ก.พ. 2018 2:16 pm โดย thatsawan
ความเเตกต่าง ระหว่าง python 2 - python 3
โดย Jom07 ศ 16 ก.พ. 2018 1:48 pm บอร์ด Python Knowledge
0
39
ศ 16 ก.พ. 2018 1:48 pm โดย Jom07
Selenium : การใช้คำสั่งวนลูปใน xpath
โดย Panchalee ศ 16 ก.พ. 2018 1:44 pm บอร์ด Software testing
0
28
ศ 16 ก.พ. 2018 1:44 pm โดย Panchalee