[CSS]Link animation Effect

posted on 08 Feb 2012 22:51 by limitblog in css directory Idea

สวัสดีวันที่ "8 กุมภาพันธ์ 55"
วันนี้จะทำเป็น Link animation Effect โดยใช้ Css3 : attribute selectors
ข้อมูลจาก : css3.info
Substring matching attribute selectors Three additional attribute selectors are provided for matching substrings in the value of an attribute: [att^=val] Represents an element with the att attribute whose value begins with the prefix value. [att$=val] Represents an element with the att attribute whose value ends with the suffix value. [att*=val] Represents an element with the att attribute whose value contains at least one instance of the substring value. อ่านออกบ้างไม่ออกบ้างก็ขออภัย (google translate ยังอ่านออกบ้างไม่ออกบ้าง ^^) งั้นขออธิบายแบบบ้านๆละกันนะครับ พร้อมตัวอย่างพอสังเขป
1. [att^=val] เอาตัวแรกก่อนนะครับ " ^ " เป็นการเลือก โดยอ้างอิงค่าใน attribute แต่เปลี่ยนเงื่อนไขเป็น ค่าขึ้นต้น ยกตัวอย่าง <p title="redhot">ข้อความนี้สีขาว</p> <style> p[title^="re"] { color:red; border:solid 1px black;font-size:125%} </style> หมายความว่า ค่าใน attribute (title) ที่ ^ (ขึ้นต้นด้วย) "re" ตัวหนังสือ สีแดงและมีเส้นขอบสีดำถึบหนาหนึ่งพิกเซลตัวอักษรหนึ่งร้อยยี่สิบห้าเปร์อเซ็น ------------------------------------------------------------------------ 2. [att$=val] ตัวที่สองนะครับ " $ " เป็นการเลือก โดยอ้างอิงค่าใน attribute แต่เปลี่ยนเงื่อนไขเป็น ค่าขึ้นลงท้าย ยกตัวอย่าง <p title="ot">ข้อความนี้สีแดง</p> <style> p[title$="ot"] { color:green; border:solid 1px black;font-size:120%} </style> หมายความว่า ค่าใน attribute (title) ที่ $ (ลงท้ายด้วย) "ot" ตัวหนังสือ สีเขียวและมีเส้นขอบสีดำถึบหนาหนึ่งพิกเซลตัวอักษรหนึ่งร้อยยี่สิบเปร์อเซ็น ------------------------------------------------------------------------ 3. [att*=val] ตัวที่สามนะครับ " * " เป็นการเลือก โดยอ้างอิงค่าใน attribute แต่เปลี่ยนเงื่อนไขเป็น ค่าใดก็ได้ ยกตัวอย่าง <p title="abcdefghijk">ข้อความนี้สีดำ</p> <style> p[title*="def"] { color:pink; border:solid 1px green;font-size:130%} </style> หมายความว่า ค่าใน attribute (title) ที่ * (ทีมี) "def" ตัวหนังสือ สีชมพูและมีเส้นขอบสีเขียวถึบหนาหนึ่งพิกเซลตัวอักษรหนึ่งร้อยสามสิบเปร์อเซ็น

1. ข้อความนี้สีขาว

2. ข้อความนี้สีแดง

3. ข้อความนี้สีดำ

ยาวซะไม่มี ตอนนี้มาถึงตัวที่จะทำเป็น Link animation Effectโดยผมขี้เกียจมานั่งใส่เป็นพวก rel title หรืออะไรก็ตามเลยจะยกเอามาทั้งชื่อเพื่อให้ง่ายต่อการใช้ลิงค์นั้นๆ ก็จะใช้ตัวนี้ a[href*="xXx"] และใช้ :HOVER:BEFORE ครับ { Firefox สามารถดูได้แบบ full vertion นะครับ chrome จะออกบ้านๆนิดนึง }

มาดูตัวอย่างกันนะครับ

@nickla นายก๊าก หมาหลับใน บล๊อกของฉัน คุณ Panraphee

css อาจดูเยอะไปนิดนึงนะครับแต่ html เวลาใช้ ประหยัดยิ่ง

<style> .post a[href*="twitter"]:before { content:url(http://uc.exteenblog.com/limitblog/images/social/twitter.png); } .post a[href*="facebook"]:before { content:url(http://uc.exteenblog.com/limitblog/images/social/facebook.png); } .post a[href*="youtube"]:before { content:url(http://uc.exteenblog.com/limitblog/images/social/youtube.png); } .post a[href*="exteen"]:before { content:url(http://uc.exteenblog.com/limitblog/images/social/exteen.png); } .post a[href*="plus.google"]:before { content:url(http://uc.exteenblog.com/limitblog/images/social/Gplus.png); } .post a[href*="facebook"], .post a[href*="twitter"], .post a[href*="exteen"], .post a[href*="youtube"], .post a[href*="plus.google"] { position:relative; } .post a[href*="facebook"]:before, .post a[href*="twitter"]:before, .post a[href*="exteen"]:before, .post a[href*="youtube"]:before, .post a[href*="plus.google"]:before { position:absolute; opacity:0; -moz-transform: rotate(-360deg) scale(0.1); -moz-transition:opacity 1s, -moz-transform 1.5s, margin 1s ; margin:15px -60px; left:115px; height:1px !important; } .post a[href*="facebook"]:hover:before, .post a[href*="twitter"]:hover:before, .post a[href*="exteen"]:hover:before, .post a[href*="youtube"]:hover:before, .post a[href*="plus.google"]:hover:before { -moz-transform: rotate(0deg) scale(1); opacity:1; margin:-38px -125px; } </style> <HTML> <a href="http://twitter.com/nickla">@nickla</a> <a href="http://www.facebook.com/naikakthai">นายก๊าก</a> <a href="http://www.youtube.com/watch?v=IaCP4gEuIYE">หมาหลับใน</a> <a href="http://limitblog.exteen.com">บล๊อกของฉัน</a> <a href="https://plus.google.com/u/0/112087906318258267756/posts">คุณ Panraphee</a> </HTML> -
ต้องการทำลิงค์ให้เว็บอื่นเพิ่มอีก ก็แค่ยัดรูปแล้วเปลี่ยนตัวลิงค์ หรือไม่ก็ copy เพิ่มเว็ปครับ...
ที่ผมใช้ .post a เพราะต้องการใช้ลิงค์ที่อยู่ในโพสเท่านั้น ลองเอาไปเงะแกะดูนะครับอันนี้ไม่ยาก
แต่เสียดายที่ XXX:Hover:before,affter Chrome ไม่ support ทรานซิชั่น ^^

ท้ายนี้ :: ขอบคุณ css3.info
และทุกลิงค์ที่ยืมมาโดยมิได้บอกกล่าว ขออภัยยิ่ง

ปล. กว่าจะเขียนขึ้นมาสักบทความนี่ใช้เวลานานพอดู ยังไงถูกใจ copy past โลดด !!