ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 25 กันยายน 2561
โดย Ittichai_chupol อ 25 ก.ย. 2018 9:38 am บอร์ด M070 - อิทธิชัย ชูผล
0
1
อ 25 ก.ย. 2018 9:38 am โดย Ittichai_chupol
งานที่ประจำวันที่ 25 กันยายน 2561
โดย tatiya อ 25 ก.ย. 2018 9:28 am บอร์ด M065 - ตติยะ นาชัย
0
1
อ 25 ก.ย. 2018 9:28 am โดย tatiya
R - mod_jshopping_static โมดูลสถิติ
โดย pprn จ 24 ก.ย. 2018 6:43 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
3
จ 24 ก.ย. 2018 6:45 pm โดย pprn
B - สร้างสินค้าไม่ได้ error @M045
โดย thatsawan จ 24 ก.ย. 2018 4:20 pm บอร์ด สิริกิตติรัตน์ - Tester
1
5
จ 24 ก.ย. 2018 6:49 pm โดย nuattawoot
index อบรม Odoo ครั้งที่ 31
โดย tatiya จ 24 ก.ย. 2018 3:52 pm บอร์ด M065 - ตติยะ นาชัย
0
2
จ 24 ก.ย. 2018 3:52 pm โดย tatiya
อยากทำ input type color โชว์ พอ summit ลง database ด้วยค่ะ
โดย supattra_su จ 24 ก.ย. 2018 3:50 pm บอร์ด Programming - PHP
0
10
จ 24 ก.ย. 2018 3:50 pm โดย supattra_su
generate_pagination() เรียกใช้ไม่ได้
โดย Ittichai_chupol จ 24 ก.ย. 2018 12:22 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
3
18
จ 24 ก.ย. 2018 3:05 pm โดย thatsawan
มีส่วนเสริมที่เปิดอ่านไฟล์ pdf ไหมครับ
โดย ek_EKEK จ 24 ก.ย. 2018 12:06 pm บอร์ด Joomla Development
2
14
อ 25 ก.ย. 2018 9:40 am โดย ek_EKEK
ตัวช่วยในการตรวจสอบ Domain Name และนำบทความจาก Master Site มาแสดงโดยใช้ Module Menu Json ใน Joomla
โดย Parichat จ 24 ก.ย. 2018 11:32 am บอร์ด PHP News
0
6
จ 24 ก.ย. 2018 11:32 am โดย Parichat
ไม่สามารถ import วิดีโออบรม ใน camtasia ได้ค่ะ
โดย muneela จ 24 ก.ย. 2018 11:19 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
12
จ 24 ก.ย. 2018 11:19 am โดย muneela
คำถามลูกค้าที่มาอบรม Odoo ครั้งที่ 31
โดย tatiya จ 24 ก.ย. 2018 11:13 am บอร์ด M065 - ตติยะ นาชัย
0
4
จ 24 ก.ย. 2018 11:13 am โดย tatiya
B - อัพเดท จำนวน สินค้าไม่ได้
โดย thatsawan จ 24 ก.ย. 2018 10:44 am บอร์ด สิริกิตติรัตน์ - Tester
1
6
จ 24 ก.ย. 2018 6:59 pm โดย nuattawoot
งานประจำวันที่ 24 กันยายน 2561
โดย prakon จ 24 ก.ย. 2018 10:23 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
9
จ 24 ก.ย. 2018 3:43 pm โดย prakon
งานประจำวันที่ 24 กันยายน 2561
โดย tatiya จ 24 ก.ย. 2018 10:15 am บอร์ด M065 - ตติยะ นาชัย
1
9
จ 24 ก.ย. 2018 9:20 pm โดย tatiya
งานประจำวันที่ 24 กันยายน 2561
โดย tai14 จ 24 ก.ย. 2018 10:12 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
3
จ 24 ก.ย. 2018 6:46 pm โดย tai14
งานประจำวันที่ 24 กันยายน 2561
โดย pprn จ 24 ก.ย. 2018 10:12 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
19
จ 24 ก.ย. 2018 6:41 pm โดย pprn
งานประจำวันที่ 24 กันยายน 2561
โดย muneela จ 24 ก.ย. 2018 10:03 am บอร์ด M068 - มุนีลา หมัดบาซา
1
8
จ 24 ก.ย. 2018 7:18 pm โดย muneela
งานประจำวันที่ 24 กันยายน 2561
โดย Ittichai_chupol จ 24 ก.ย. 2018 9:55 am บอร์ด M070 - อิทธิชัย ชูผล
1
7
จ 24 ก.ย. 2018 6:58 pm โดย Ittichai_chupol
ติดตั้งJoomla ไม่ได้ค่ะ
โดย Anonymous อ 23 ก.ย. 2018 5:21 pm บอร์ด Joomla Development
1
12
อ 23 ก.ย. 2018 5:30 pm โดย mindphp
Q - ถามเรื่องการ UPDATE INSERT ข้อมูล sql server ครับ ว่าแบบ Function กับ แบบทั่วไป แบบไหนปลอดภัยกว่า
โดย nuattawoot อ 23 ก.ย. 2018 3:48 pm บอร์ด SQL - Database
0
21
อ 23 ก.ย. 2018 3:48 pm โดย nuattawoot