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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการ Insert , edit ,delete โดยผ่านตัว Model Laravel Framework
โดย makup ส 24 ต.ค. 2020 3:44 pm บอร์ด PHP Knowledge
1
17
ส 24 ต.ค. 2020 3:59 pm โดย makup
ติดปัญหาการค้นหาข้อมูล Listbox ให้เลือกค่าเก่าค้างไว้
โดย makup พฤ 22 ต.ค. 2020 8:05 pm บอร์ด Programming - PHP
6
65
อ 25 ต.ค. 2020 5:28 pm โดย makup
อยากทราบว่า ตรงที่แสดงข้อมูล URL จะให้แสดงเฉพาะ id แค่ตัวเลข ต้องทำอย่างไงครับ
โดย makup พฤ 22 ต.ค. 2020 8:05 pm บอร์ด Programming - PHP
3
34
พฤ 22 ต.ค. 2020 8:16 pm โดย mindphp
วิธีการ Upload file ภาพ ขึ้น Server
โดย makup พฤ 22 ต.ค. 2020 5:41 pm บอร์ด PHP Knowledge
1
36
พฤ 22 ต.ค. 2020 5:54 pm โดย makup
ปัญหา phpBB Error ในหน้า admin vsprintf(): Too few arguments
โดย mindphp พ 21 ต.ค. 2020 5:36 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
0
30
พ 21 ต.ค. 2020 5:36 pm โดย mindphp
สอนเขียนวิธี Upload File Laravel ขึ้น Server
โดย makup พ 21 ต.ค. 2020 3:41 pm บอร์ด PHP Knowledge
2
53
พ 21 ต.ค. 2020 5:25 pm โดย makup
สอบถาม การขึ้นบรรทัดใหม่ ด้วย การนับ len และตัดแบบเต็มคำยังไงคะ
โดย bolue อ 20 ต.ค. 2020 7:22 pm บอร์ด Programming - C/C++ & java & Python
2
53
อ 20 ต.ค. 2020 8:15 pm โดย mindphp
วิธีการทำระบบค้นหา ใน Laravel Framework
โดย makup อ 20 ต.ค. 2020 12:57 pm บอร์ด PHP Knowledge
0
51
อ 20 ต.ค. 2020 12:57 pm โดย makup
เจอปัญหา Publishing failed. You are probably offline. ปัญหาใน Wordpress 5.x
โดย mindphp อ 20 ต.ค. 2020 6:03 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
35
อ 20 ต.ค. 2020 6:30 am โดย mindphp
แสดงสินค้าที่ขายได้ล่าสุด ด้วย Module Latest Sold Products ใน MooZiiCart
โดย bolue จ 19 ต.ค. 2020 6:53 pm บอร์ด MindPHP News & Feedback
0
107
จ 19 ต.ค. 2020 6:53 pm โดย bolue
ติดปัญหาเรื่อง การทำปุ่ม ค้นหา ที่มีการเชื่อมความสัมพันธ์ Laravel Framework
โดย makup จ 19 ต.ค. 2020 6:23 pm บอร์ด Programming - PHP
3
137
อ 20 ต.ค. 2020 1:32 pm โดย mindphp
วิธีการกำหนด Routing ใน Laravel Framework
โดย makup จ 19 ต.ค. 2020 7:15 am บอร์ด PHP Knowledge
0
132
จ 19 ต.ค. 2020 7:15 am โดย makup
วิธีแสดงพิกัดบนแผนที่ OpenStreetMap ด้วย Laravel Framework
โดย makup อ 18 ต.ค. 2020 6:21 pm บอร์ด PHP Knowledge
0
105
อ 18 ต.ค. 2020 6:21 pm โดย makup
เจอปัญหา ในฐาน Joomla Out of resources when opening file '/tmp/#sql_7059_0.MAD' (Errcode: 24 "Too many open files")
โดย mindphp อ 18 ต.ค. 2020 5:34 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
106
อ 18 ต.ค. 2020 5:41 pm โดย mindphp
Re: Mysql เช็คerror ฟิลซ้ำ แสดงข้อความ(PHP)
โดย kimmyth ศ 16 ต.ค. 2020 11:26 pm บอร์ด Programming - PHP
1
107
ส 17 ต.ค. 2020 10:02 am โดย mindphp
Mysql เช็คerror ฟิลซ้ำ แสดงข้อความ
โดย kimmyth ศ 16 ต.ค. 2020 11:22 pm บอร์ด Programming - PHP
0
85
ศ 16 ต.ค. 2020 11:22 pm โดย kimmyth
อยากทราบว่า มีตัวอย่าง OpenstreetMap ในการใช้งานร่วมกับ MySQL , PHP บ้างไหมครับ
โดย makup ศ 16 ต.ค. 2020 7:25 pm บอร์ด Programming - PHP
2
115
ศ 16 ต.ค. 2020 7:48 pm โดย makup
การคำนวณต้นทุนสินค้า แบบ FIFO และ Weighted Average
โดย bolue ศ 16 ต.ค. 2020 6:53 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
127
ศ 16 ต.ค. 2020 6:53 pm โดย bolue
วิธีการเชื่อมความสัมพันธ์ข้อมูล one to many บน Laravel Framework
โดย makup ศ 16 ต.ค. 2020 6:40 pm บอร์ด PHP Knowledge
0
148
ศ 16 ต.ค. 2020 6:40 pm โดย makup
Function Validate Laravel Framework
โดย makup ศ 16 ต.ค. 2020 4:22 pm บอร์ด PHP Knowledge
0
138
ศ 16 ต.ค. 2020 4:22 pm โดย makup