UNKLE 유통 code

ลำดับตอนที่ #3 : UNKLE 유통 : shaking (V2 !!!!)

THE★ FARRY

 

<style type="text/css"> @-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);} } a:hover { -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>

โค้ดแรกนี่ส่วนที่กดแล้วเป็นลิงค์จะสั่นหมดนะครับ
อันไหนไม่ใช่ลิงค์จะไม่สั่น


--------------------------------

 

<style type="text/css"> @-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);} } img:hover { -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>

นำไปใส่ได้เลยครับรู้สึกว่าจะใช้ได้แต่กับ firefox
แบบนี้เวอ2 ลิ้งค์จะไม่สั่นตามด้วยนะครับ
แต่ว่าไม่ต้องกำหนดรูปภาพที่จะให้สั่น เพราะมันจะสั่นหมดเมื่อเอาเมาส์ไปชี้