CSS3

Speech

เป็น back แบบเต็มหน้าจอ ก็อยู่หลานรอบเช่นกันเพราะคิดเลขไอ้ key frame ไม่ค่อยเป็นเท่าไหร่ เคยผ่านไปเห็นหลายๆเว็บที่ออกแนวนี้เยอะขึ้นก็เลยลองทำในแบบ css3 ขึ้น ผมต้องขอยกยอดให้ http://paulmason.name/ และ http://css3.bradshawenterprises.com ก็เลยจัดได้ว่า

.full-screen { z-index: -999; min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; background-image:#CCC; } .full-screen img { -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration:15s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -moz-animation-duration: 60s; /*ให้มันใหญ่*/ min-height: 100%; min-width: 1024px; width: 100%; height: auto; } .full-screen img { position:absolute; top:0; left:0; } .img1 { -webkit-animation-name: pic1; -moz-animation-name: pic1; } .img2 { -webkit-animation-name: pic2 !important; -moz-animation-name: pic2; } .img3 { -webkit-animation-name: pic3; -moz-animation-name: pic3; } .img4 { -webkit-animation-name: pic4; -moz-animation-name: pic4; } /******************* webkit *********************/ @-webkit-keyframes pic1 { 0% {opacity:0;} 5% {opacity:1;} 25% {opacity:1;} 100% {opacity:1;} } @-webkit-keyframes pic2 { 0% {opacity:0;} 25% {opacity:0;} 30% {opacity:1;} 50% {opacity:1;} 100% {opacity:1;} } @-webkit-keyframes pic3 { 0% {opacity:0;} 50% {opacity:0;} 55% {opacity:1;} 75% {opacity:1;} 100% {opacity:1;} } @-webkit-keyframes pic4 { 0% {opacity:0;} 75% {opacity:0;} 80% {opacity:1;} 100% {opacity:1;} } /******************* gecko *********************/ @-moz-keyframes pic1 { 0% {opacity:0;} 5% {opacity:1;} 25% {opacity:1;} 100% {opacity:1;} } @-moz-keyframes pic2 { 0% {opacity:0;} 25% {opacity:0;} 30% {opacity:1;} 50% {opacity:1;} 100% {opacity:1;} } @-moz-keyframes pic3 { 0% {opacity:0;} 50% {opacity:0;} 55% {opacity:1;} 75% {opacity:1;} 100% {opacity:1;} } @-moz-keyframes pic4 { 0% {opacity:0;} 75% {opacity:0;} 80% {opacity:1;} 100% {opacity:1;} } HTML ที่จะนำไปวาง <div class="full-screen"> <img class="img1" src="/*******/" /> <img class="img2" src="/*******/" /> <img class="img3" src="/*******/" /> <img class="img4" src="/*******/" /> <div class="full-screen">

ตัวอย่างอยู่ด้านหลังหรือดูตัวอย่าง source แบบข้างบนก็ดูได้ใน linkpage ด้านบนเลยนครับ