[CSS] Menu with CSS3 Transitions

posted on 23 Jan 2012 20:01 by limitblog in css directory Idea
วันนี้จะพูดถึง Menu with CSS3 Transitions อย่างง่าย
คุณสมบัติต่างๆ ที่ มีนั้น มีอะไรบ้าง

คุณสมบัติต่างๆ ที่ มีนั้น มีอะไรบ้าง

  1. transition-property คือ การกำหนดว่า ใน selector นั้นๆ เราจะทำ transition ให้กับ property ใดบ้าง
  2. transition-duration คือ ระยะเวลาของการ เปลี่ยนถ่าย จากจุด A ไปยัง B ใช้เวลาเท่าไหร่ ให้กำหนดเป็นวินาที
  3. transition-timing-function คือ รูปแบบการเกิดการ transition มี ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )
  4. transition-delay คือ การหน่วงเวลาของการเกิด transition
  5. transition คือ การเขียน Shorthand propery ให้เรียงตามนี้ [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]
บทความจากThaiCSS เข้าไปอ่านดูครับละเอียดดีจริงๆ
มันใส่เยอะไปเอาแบบง่ายๆ แบบงูๆปลาๆ ในวิธีมั่วๆของผมไม่ต้องกำหนดค่า transition-property เช่นกำหนดให้เปลี่ยนสี กำหนดให้กว้างออกให้สูงขึ้น
-moz-transition-property: width, background, height; -webkit-transition-property: width, background, height; -o-transition-property: width, background, height; transition-property: width, background, height; -moz-transition-duration: 2s; -webkit-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; และแบบงูๆปลาๆก็จะได้ transition:all 2s ease; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; -o-transition-delay: all 2s ease; โดยตัวอย่างด่านล่างผมไม่อาจไปนั่งใส่ทีละอันผมจะใส่ไว้ทั้งหน้าเลย *{ transition:all 1s ease; -moz-transition:all 1s ease; -webkit-transition:all 1s ease; -o-transition-delay: all 1s ease; }

ตัวอย่างแรก

.nav1>li{ margin-left:0; } .nav1>li:hover{ margin-left:15px; }

ตัวอย่างที่สอง

.nav2>li{ -moz-transform: rotate(4deg); -webkit-transform: rotate(4deg); } .nav2>li:hover{ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }

ตัวอย่างที่สาม

.nav3>li{ position:relative; width:50%; -moz-transform: scale(1); -webkit-transform: scale(1); } .nav3>li:hover{ margin:0px 0px 0px 110px; -moz-transform: scale(2); -webkit-transform: scale(2); }

ตัวอย่างที่สี่

.nav4>li{ font-size:22px !important; color:rgba(0,0,0,0); text-shadow:0 0 4px #000,0 0 3px #000,0 0 2px #000; } .nav4>li:hover{ color:rgba(0,0,0,1); text-shadow:none; }

ตัวอย่างที่ห้า

.nav5>li{ list-style:none; width:21%; margin-bottom:5px; background-color:#480000; padding:5px; border-radius:4px; font-size:22px !important; color:rgba(0,0,0,0); text-shadow:0 0 4px #fff,0 0 3px #fff,0 0 2px #fff; padding-left:10px; border:1px solid #fff; -moz-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); } .nav5>li:nth-child(odd){ background-color:#000; -moz-transform: rotate(4deg); -webkit-transform: rotate(4deg); } .nav5>li:hover{ width:50%; list-style:none; color:rgba(255,255,255,1); text-shadow:none; background-color:#000; padding-left:30%; box-shadow:0 0 50px #000; -moz-transform: scale(2); -webkit-transform: scale(2); border:5px solid #fff; z-index:1; }
มั่วๆออกมาแค่นี้ก็ออกมาดูเนี่ยนยิ่ง
ปล. ไม่เหมาะกับบร๊าวเซอร์ อบต. อำเภอ โรงเรียนเทศบาล

Comment

Comment:

Tweet

Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!
ปาปาปาดราก้อนบxล บล็อกนี้หนูมาดูดอะไรได้เยอะมาก
//ผีปลิงเข้าสิง แฮ่ๆ
ขอบคุณก๊าบบบบconfused smile confused smile

#7 By By-feurn on 2013-08-02 13:24

Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! คุณพระ!!!!~

#6 By Kiseki Sora on 2012-02-24 18:24

Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#5 By moriaty on 2012-01-24 19:23

อุ.. เห็นแล้วปวดตับ css ธรรมดาอันเก่ายังไม่รอดเลยค่ะ เปลี่ยนใหม่แล้วกำลังปาดเหงื่อไม่กล้าแตะธีมเลย Hot!

#4 By D-faxtory on 2012-01-24 12:57

เมพขิงๆ

#3 By blueboat on 2012-01-23 20:42

Hot! Hot!
เจ๋งมากค่ะ XD
CSS3 นี่มันสวดยอดเป็นที่สุดsurprised smile big smile confused smile
ติดตามอ่านครับบล็อกนี้ (แอดไปแล้ว)double wink
อย่างนี้ต้องกระหน่ำด้วยดาวแดง เพื่อตอบแทนกับความรู้ดีๆแบบนี้
Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! open-mounthed smile

#1 By บุรุษนิรนาม on 2012-01-23 20:06