W3.CSS

W3.CSS หน้าแรก W3.CSS แนะนำ W3.CSS สี คอนเทนเนอร์ W3.CSS แผง W3.CSS เส้นขอบ W3.CSS การ์ด W3.CSS ค่าเริ่มต้นของ W3.CSS แบบอักษร W3.CSS W3.CSS Google W3.CSS Text W3.CSS รอบ W3.CSS แพ็ดดิ้ง W3.CSS Margins จอแสดงผล W3.CSS ปุ่ม W3.CSS W3.CSS หมายเหตุ คำคม W3.CSS การแจ้งเตือน W3.CSS ตาราง W3.CSS รายการ W3.CSS W3.CSS รูปภาพ อินพุต W3.CSS ป้าย W3.CSS แท็ก W3.CSS ไอคอน W3.CSS W3.CSS ตอบสนอง เค้าโครง W3.CSS ภาพเคลื่อนไหว W3.CSS เอฟเฟกต์ W3.CSS W3.CSS บาร์ ดรอปดาวน์ W3.CSS หีบเพลง W3.CSS W3.CSS การนำทาง แถบด้านข้าง W3.CSS แท็บ W3.CSS การแบ่งหน้า W3.CSS แถบความคืบหน้า W3.CSS สไลด์โชว์ W3.CSS W3.CSS โมดอล เคล็ดลับเครื่องมือ W3.CSS W3.CSS กริด รหัส W3.CSS ตัวกรอง W3.CSS W3.CSS Trends กรณี W3.CSS W3.CSS วัสดุ การตรวจสอบ W3.CSS เวอร์ชัน W3.CSS W3.CSS มือถือ

W3.CSS สี

คลาสสี W3.CSS W3.CSS วัสดุสี W3.CSS Color Flat UI W3.CSS Color Metro UI W3.CSS สี Win8 W3.CSS Color iOS W3.CSS แฟชั่นสี ไลบรารีสี W3.CSS W3.CSS แบบแผนสี ธีมสี W3.CSS W3.CSS เครื่องกำเนิดสี

การสร้างเว็บ

แนะนำเว็บ เว็บ HTML เว็บ CSS JavaScript ของเว็บ เค้าโครงเว็บ เว็บแบนด์ เว็บจัดเลี้ยง เว็บร้านอาหาร สถาปนิกเว็บ

ตัวอย่าง

ตัวอย่าง W3.CSS W3.CSS สาธิต เทมเพลต W3.CSS

อ้างอิง

การอ้างอิง W3.CSS ดาวน์โหลด W3.CSS

ภาพเคลื่อนไหว W3.CSS








แอนิเมชั่นสนุก!

คลาสแอนิเมชั่น W3.CSS

W3.CSS มีคลาสต่อไปนี้สำหรับแอนิเมชั่น:

ระดับ กำหนด
w3-animate-top เลื่อนในองค์ประกอบจากด้านบน (-300px ถึง 0)
w3-animate-ด้านล่าง เลื่อนในองค์ประกอบจากด้านล่าง (-300px ถึง 0)
w3-animate-left เลื่อนในองค์ประกอบจากด้านซ้าย (-300px ถึง 0)
w3-animate-ใช่ เลื่อนในองค์ประกอบจากด้านขวา (-300px ถึง 0)
w3-animate-ทึบ ทำให้ความทึบขององค์ประกอบเคลื่อนไหวจาก 0 ถึง 1 ใน 0.8 วินาที
w3-animate-ซูม ทำให้องค์ประกอบเคลื่อนไหวตั้งแต่ 0 ถึง 100% ในขนาด
w3-เคลื่อนไหว-จางหาย ทำให้ความทึบขององค์ประกอบเคลื่อนไหวตั้งแต่ 0 ถึง 1 และ 1 ถึง 0 (จางลง + จางออก)
w3-spin หมุนองค์ประกอบ 360 องศา

ด้านบนเคลื่อนไหว

คลาสw3-animate-topเลื่อนในองค์ประกอบจากด้านบนสุด (จาก -300px ถึง 0):

ตัวอย่าง

<div class="w3-container">
  <h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>


ด้านล่างเคลื่อนไหว

คลาสw3-animate-bottomเลื่อนในองค์ประกอบจากด้านล่าง (จาก -300px ถึง 0):

ตัวอย่าง

<div class="w3-container">
  <h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>

เคลื่อนไหวซ้าย

คลาสw3-animate-leftเลื่อนในองค์ประกอบจากซ้าย (-300px ถึง 0):

ตัวอย่าง

<div class="w3-container">
  <h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>

เคลื่อนไหวถูกต้อง

คลาสw3-animate-rightเลื่อนในองค์ประกอบจากด้านขวา (-300px ถึง 0):

ตัวอย่าง

<div class="w3-container">
  <h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>

จางหายไปในองค์ประกอบ

คลาสw3-animate-opacity ทำให้ความทึบขององค์ประกอบเคลื่อนไหวจาก 0 ถึง 1 ใน 0.8 วินาที

จางลงในองค์ประกอบด้วย คลาส w3-animate-opacity :

ตัวอย่าง

<div class="w3-animate-opacity">..</div>

ซูมเข้าองค์ประกอบ

คลาสw3-animate-zoomทำให้องค์ประกอบเคลื่อนไหวตั้งแต่ 0 ถึง 100%

ซูมองค์ประกอบด้วย คลาส w3-animate-zoom :

ตัวอย่าง

<div class="w3-animate-zoom">..</div>

Spin Elements

คลาสw3-spinหมุนองค์ประกอบ 360 องศา:

ตัวอย่าง

<div class="w3-spin">..</div>

Fading Infinite

คลาสw3-animate-fadingจะค่อยๆ เข้าและออกจากองค์ประกอบทุกๆ 10 วินาที (ต่อเนื่อง):

เคลื่อนไหว Fade In และ Out

ตัวอย่าง

<div class="w3-animate-fading">..</div>

Fade All

ตัวอย่าง

<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">