[EDIT]Shaking Up With CSS3

posted on 06 Feb 2012 09:33 by limitblog in css directory Idea

สวัสดี "เดือนแห่งความรัก"


       ก่อนอื่นใดค้องขอให้กด F5 ก่อนนะครับเพราะแก้ไขธีมไปหลายส่วนเดือนแห่งความรัก (ต่อไปคงต้องใส่สคริปแทนไม่ต้องมานั่งกด F5 บ่อยๆครับ
       พอดีผ่านไปเห็นเว็บสอนลูกเล่นเกี่ยวกับ transform-origin ในชื่อที่ว่า "Shaking Up The Web With CSS3 (or: How To Make Links Shake In Their Space-Boots)" แค่ชื่อพี่ก็ตั้งซะยาวเป็นกิโล แบบบ้านๆมันก็คือเอาเมาว์ไปชี้ลิงค์แล้วเกิด HOVER เสมือนเขย่า แต่มันน่าเศร้าใจที่มันเค้าบอกว่าว่า CSS3 Shake Animation Demo (Webkit only) Firefox อดไปเค้าว่างั้น ก็เลยลองเอามาแก้ให้มันใช้ได้กับ firefox ตอนแรกก็แก้แบบบ้านๆคื่อ copy มาแล้วเปลี่ยนจาก -webkit- เป็น -moz-มันก็ไม่ติดเลยทำการรวมๆ แบบ shorthand ดูก็ 0k!!
       ลองดู codeกันครับ และดู hover ตัวอย่าง ได้ทั้ง -moz- และ -webkit- (ผมได้เพิ่ม scale ลงไปด้วย)
CSS ดังเดิมจากเว็บ cssreset.com <style> @-webkit-keyframes spaceboots { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 1px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, -2px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -2px) rotate(1deg); } 90% { -webkit-transform: translate(2px, -1px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } } @-moz-keyframes spaceboots { 0% { -moz-transform: translate(2px, 1px) rotate(0deg) scale(1);} 10% { -moz-transform: translate(-1px, -2px) rotate(-1deg) scale(0.98);} 20% { -moz-transform: translate(-3px, 0px) rotate(1deg) scale(1);} 30% { -moz-transform: translate(0px, 2px) rotate(0deg) scale(0.98);} 40% { -moz-transform: translate(1px, -1px) rotate(1deg) scale(1);} 50% { -moz-transform: translate(-1px, 1px) rotate(-1deg) scale(0.98);} 60% { -moz-transform: translate(-3px, -2px) rotate(0deg) scale(1);} 70% { -moz-transform: translate(2px, 1px) rotate(-1deg) scale(0.98);} 80% { -moz-transform: translate(-1px, -2px) rotate(1deg) scale(1);} 90% { -moz-transform: translate(2px, -1px) rotate(0deg) scale(0.98);} 100% { -moz-transform: translate(1px, -2px) rotate(-1deg) scale(1);} } .shake:hover, .shake:focus, a:hover, a:focus { -webkit-animation-name: 'spaceboots'; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation: spaceboots 0.8s linear; -moz-animation-iteration-count: infinite; } </style> HTML <!--IMAGE HOVER--> <img src="Your image" class="shake"/>

DEMO






credit: http://www.cssreset.com
ปล. ช่วงนี้ฝนตกแดดออกไม่ค่อยตรงตามฤดูกาลสักเท่าไหร่ยังไงรักษาสุขภาพกันบ้างนะครับ

Comment

Comment:

Tweet

เจ๋งมากเลยค่ะ ขอ add ไว้นะคะ Hot!
(เกือบหาที่ add ไม่เจอ แหะๆ)

#5 By Neverthelezz on 2012-02-09 14:13

สวยมากเลยค่ะะะ
ขอเอาไปใช้นะคะ cry

#4 By 抱き☆彡 on 2012-02-09 02:34

โอว สุดยอดค่าาา
Hot!

#2 By daveySPICE! on 2012-02-07 19:42

เจ๋งมากๆๆ ครับ จะลองดูครับ question

#1 By GOLF! (58.8.193.216) on 2012-02-07 18:03