Hover
2.3.1
ชุดเอฟเฟกต์โฮเวอร์ที่ขับเคลื่อนด้วย CSS3 ที่จะนำไปใช้กับลิงก์ ปุ่ม โลโก้ SVG รูปภาพเด่น และอื่นๆ นำไปใช้กับองค์ประกอบของคุณเอง ปรับเปลี่ยน หรือใช้เพื่อสร้างแรงบันดาลใจได้อย่างง่ายดาย มีอยู่ใน CSS, Sass และ LESS
สาธิต | บทช่วยสอน
npm install hover.css --savebower install hover --saveHover.css สามารถใช้งานได้หลายวิธี คัดลอกและวางเอฟเฟกต์ที่คุณต้องการใช้ในสไตล์ชีตของคุณเองหรืออ้างอิงสไตล์ชีต จากนั้นเพียงเพิ่มชื่อคลาสของเอฟเฟกต์ให้กับองค์ประกอบที่คุณต้องการใช้
หากคุณวางแผนที่จะใช้เอฟเฟกต์เพียงรายการเดียวหรือหลายรายการ ทางที่ดีควรคัดลอกและวางเอฟเฟกต์ลงในสไตล์ชีตของคุณเอง เพื่อให้ผู้ใช้ไม่จำเป็นต้องดาวน์โหลด css/hover.css ทั้งหมด
สมมติว่าคุณต้องการใช้เอฟเฟกต์ Grow:
ดาวน์โหลด Hover.css
ใน css/hover.css ให้ค้นหา Grow CSS (แต่ละเอฟเฟกต์ตั้งชื่อโดยใช้ความคิดเห็นด้านบน):
/* Grow */
. hvr-grow {
display : inline-block;
vertical-align : middle;
transform : translateZ ( 0 );
box-shadow : 0 0 1 px rgba ( 0 , 0 , 0 , 0 );
backface-visibility : hidden;
-moz-osx-font-smoothing : grayscale;
transition-duration : 0.3 s ;
transition-property : transform;
}
. hvr-grow : hover ,
. hvr-grow : focus ,
. hvr-grow : active {
transform : scale ( 1.1 );
}คัดลอกเอฟเฟกต์นี้แล้ววางลงในสไตล์ชีตของคุณเอง
ในไฟล์ HTML ที่คุณต้องการให้เอฟเฟกต์ปรากฏขึ้น ให้เพิ่มคลาส .hvr-grow ให้กับองค์ประกอบที่คุณเลือก
องค์ประกอบตัวอย่างก่อนที่จะใช้เอฟเฟกต์ Hover.css:
< a href =" # " > Add to Basket a >องค์ประกอบตัวอย่างหลังจากใช้เอฟเฟกต์ Hover.css:
< a href =" # " class =" hvr-grow " > Add to Basket a > หมายเหตุ : ตั้งแต่ 2.0.0 ชื่อคลาส Hover.css ทั้งหมดจะมีคำนำหน้าด้วย hvr- เพื่อป้องกันความขัดแย้งกับไลบรารี/สไตล์ชีตอื่นๆ หากใช้ Sass/LESS สามารถเปลี่ยนได้อย่างง่ายดายโดยใช้ตัวแปร $nameSpace / @nameSpace ใน scss/_options.scss หรือ less/_options.less
หากคุณวางแผนที่จะใช้เอฟเฟกต์ Hover.css มากมาย คุณอาจต้องการอ้างอิงสไตล์ชีต Hover.css ทั้งหมด
hover-min.csshover-min.css ลงในไฟล์เว็บไซต์ของคุณ ในไดเร็กทอรีชื่อ css เป็นต้นhover-min.css ใน < head >
< link href =" css/hover-min.css " rel =" stylesheet " >
head >หรือคุณสามารถเพิ่มการอ้างอิงลงในสไตล์ชีตที่มีอยู่ได้ (ซึ่งอาจเป็นประโยชน์สำหรับผู้ใช้ WordPress ที่ไม่สามารถแก้ไข HTML):
@import url ( "hover-min.css" );.hvr-grow ให้กับองค์ประกอบที่คุณเลือกองค์ประกอบตัวอย่างก่อนที่จะใช้เอฟเฟกต์ Hover.css:
< a href =" # " class =" button " > Add to Basket a >องค์ประกอบตัวอย่างหลังจากใช้เอฟเฟกต์ Hover.css:
< a href =" # " class =" button hvr-grow " > Add to Basket a >displayหากต้องการทำให้องค์ประกอบ "เปลี่ยนแปลงได้" Hover.css จะให้องค์ประกอบต่อไปนี้แก่องค์ประกอบทั้งหมดที่นำไปใช้กับ:
display : inline-block;
vertical-align : middle; หากคุณต้องการแทนที่พฤติกรรมนี้ ให้ลบ CSS ด้านบนออกจาก Hover.css หรือเปลี่ยนคุณสมบัติ display สำหรับองค์ประกอบ อย่าลืมประกาศการแทนที่หลังจากการประกาศ Hover.css เพื่อให้ CSS cascade มีผล อีกทางหนึ่ง หากคุณใช้ Hover.css เวอร์ชัน Sass/LESS คุณสามารถลบ/แสดงความคิดเห็นมิกเซอร์ forceBlockLevel() ที่พบใน scss/_hacks.scss หรือ less/_hacks.less
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบที่เปลี่ยนแปลงได้ โปรดดูที่โมดูลการแปลง CSS
หากต้องการเพิ่มไอคอน Hover.css ให้วางไอคอน HTML ภายในองค์ประกอบที่ใช้เอฟเฟกต์ Hover.css ตัวอย่างเช่น:
ในโค้ดข้างต้น เราได้กำหนดคลาส hvr-icon-forward ให้กับองค์ประกอบลิงก์ ซึ่งจะทำให้ไอคอนเคลื่อนที่ไปข้างหน้าเมื่อลิงก์ถูกวางเมาส์ไว้เหนือ ตัวไอคอนนั้นได้รับคลาสของ hvr-icon เพื่อให้ Hover.css รู้ว่านี่คือไอคอนที่เราต้องการทำให้เคลื่อนไหว ในตัวอย่างนี้ ไอคอนของเรามาจาก FontAwesome ซึ่งเราได้โหลดลงใน ของหน้าเว็บของเราตามคำแนะนำของ FontAwesome เช่น:
< link href =" //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css " rel =" stylesheet " media =" all " >หมายเหตุ: ตั้งแต่ Hover.css เวอร์ชัน 2.3.0 คุณสามารถใช้วิธีการใดก็ได้ที่คุณต้องการในการเพิ่มไอคอน (ก่อนหน้านี้ รองรับเฉพาะ FontAwesome เท่านั้นแบบสำเร็จรูป) ตัวอย่างเช่น คุณสามารถใช้ไลบรารีไอคอนอื่น หรือใช้ ภาพเช่นนั้น:
ที่นี่ รูปภาพจะทำหน้าที่เป็นไอคอนเนื่องจากมีการใช้คลาส hvr-icon และเมื่อวางเมาส์ไว้เหนือ ไอคอนจะหมุนตามที่กำหนดโดยคลาส hvr-icon-spin บนองค์ประกอบหลัก
ตำแหน่งของไอคอนอยู่ในการควบคุมของคุณทั้งหมด คุณสามารถวางไว้หน้าข้อความได้ เช่น:
หรือใช้ CSS ที่กำหนดเองเพื่อวางตำแหน่งไอคอนตามที่เห็นสมควร
โครงการประกอบด้วยโฟลเดอร์และไฟล์ต่อไปนี้:
ไฟล์บันทึกอื่นๆ ได้แก่:
เอฟเฟกต์ Hover.css จำนวนมากอาศัยคุณสมบัติ CSS3 เช่น การเปลี่ยนภาพ ภาพเคลื่อนไหว การแปลง และองค์ประกอบหลอก ด้วยเหตุนี้ เอฟเฟกต์จึงอาจทำงานได้ไม่เต็มที่ในเบราว์เซอร์รุ่นเก่า
นอกเหนือจากเบราว์เซอร์ที่กล่าวมาข้างต้นแล้ว Hover.css ยังรองรับเบราว์เซอร์หลักๆ ทั้งหมดอีกด้วย โปรดดู caniuse.com เพื่อรับการสนับสนุนอย่างเต็มที่สำหรับเทคโนโลยีเว็บมากมาย และทดสอบหน้าเว็บของคุณตามนั้น ขอแนะนำให้ใช้เอฟเฟ็กต์สำรองสำหรับเบราว์เซอร์รุ่นเก่า โดยใช้ CSS ที่เบราว์เซอร์เหล่านั้นรองรับหรือไลบรารีทดสอบฟีเจอร์ เช่น Modernizr
Grunt ไม่จำเป็นแต่สามารถเร่งการพัฒนาได้ เมื่อติดตั้ง Grunt แล้ว ให้รัน grunt จากบรรทัดคำสั่งเพื่อตั้งค่าเซิร์ฟเวอร์การพัฒนาที่เข้าถึงได้ที่ http://127.0.0.1:8000/ หรือ IP ในเครื่องของคุณสำหรับการทดสอบเครือข่าย เมื่อใช้ Grunt Sass หรือ LESS จะถูกประมวลผลล่วงหน้า (ขึ้นอยู่กับว่าคุณทำงานจากโฟลเดอร์ scss หรือ less ) และไฟล์ CSS จะถูกย่อขนาด
หมายเหตุ: เดิมที Grunt ได้รับการตั้งค่าให้ใส่คำนำหน้าคุณสมบัติ CSS อัตโนมัติ แต่เพื่อให้โครงการเข้าถึงได้มากที่สุดเท่าที่จะเป็นไปได้ กรณีนี้จะไม่เป็นเช่นนั้นอีกต่อไป ควรใช้ prefixed(property, value) Sass/LESS mixin สำหรับคำนำหน้าเบราว์เซอร์แทน ดูการใช้ Sass/LESS เพื่อการพัฒนา และ [การใช้ LESS เพื่อการพัฒนา]
Sass/LESS ไม่จำเป็นแต่สามารถเร่งการพัฒนาได้ ประมวลผล Sass/LESS ล่วงหน้าด้วยซอฟต์แวร์ที่คุณชื่นชอบหรือสภาพแวดล้อมที่มอบให้ผ่าน Grunt
Sass/LESS ใช้ในโครงการ Hover.css เพื่อแยก CSS ต่างๆ ออกเป็นไฟล์เฉพาะ แต่ละเอฟเฟ็กต์จะอยู่ภายในไฟล์ของตัวเองในไดเร็กทอรี effects Hover.css ยังใช้ไฟล์ .scss และ .less ต่อไปนี้:
มีแฮ็ก (บรรทัดโค้ดที่ไม่พึงประสงค์ แต่โดยทั่วไปจำเป็น) ที่นำไปใช้กับเอฟเฟกต์บางอย่าง อธิบายแฮ็กไว้ที่นี่
ประกอบด้วย prefixed และมิกซ์ keyframes ที่ใช้คำนำหน้าที่จำเป็นที่คุณระบุใน _options.scss / _options.less กับคุณสมบัติและคีย์เฟรม
คุณสมบัติสามารถใส่คำนำหน้าได้ดังนี้:
@include prefixed(transition-duration , .3s);. prefixed ( transition-duration , .3 s ); มิกซ์ prefixed จะถูกส่งผ่านคุณสมบัติที่คุณต้องการนำหน้า ตามด้วยค่าของมัน
คีย์เฟรมสามารถนำหน้าได้ดังนี้:
@include keyframes(my-animation) {
to {
color : red;
}
} มิกซ์ keyframes จะถูกส่งผ่านชื่อคีย์เฟรม ตามด้วยเนื้อหาโดยใช้คำสั่ง @content
. keyframes ( my-animation , {
to {
color : red;
}
}); มิกซ์ keyframes จะถูกส่งผ่านชื่อคีย์เฟรม ตามด้วยเนื้อหา ทั้งสองเป็นอาร์กิวเมนต์
ประกอบด้วยตัวเลือกเริ่มต้น ตัวเลือกเอฟเฟกต์ต่างๆ และคำนำหน้าเบราว์เซอร์ที่คุณต้องการใช้กับมิกซ์อิน prefixed ตามค่าเริ่มต้น เฉพาะคำนำหน้า -webkit- เท่านั้นที่ถูกตั้งค่าเป็น true (เนื่องจากเบราว์เซอร์ส่วนใหญ่ไม่ต้องการคำนำหน้าในขณะนี้)
ตั้งแต่ 2.0.0 นั้น _options ยังมีตัวเลือก $nameSpace / @nameSpace ซึ่งช่วยให้คุณสามารถเปลี่ยนชื่อคลาสทั้งหมดที่นำหน้าด้วยได้ เนมสเปซเริ่มต้นคือ hvr
ตัวเลือก $includeClasses / @includeClasses ตามค่าเริ่มต้นถูกตั้งค่าเป็น true และจะสร้างเอฟเฟกต์ Hover.css ทั้งหมดภายใต้ชื่อคลาสของตัวเอง เช่น hvr-grow หากคุณต้องการเพิ่มคุณสมบัติที่สร้างเอฟเฟกต์ Hover.css ให้กับชื่อคลาสของคุณเอง ให้ตั้งค่าตัวเลือกนี้เป็น false
หากคุณต้องการสนับสนุนเอฟเฟกต์ของคุณเอง โปรดดูที่คู่มือการสนับสนุน
Hover.css มีให้บริการภายใต้ใบอนุญาตส่วนบุคคล/โอเพ่นซอร์สฟรี หรือใบอนุญาตเชิงพาณิชย์แบบชำระเงิน ขึ้นอยู่กับความต้องการของคุณ หากต้องการเปรียบเทียบใบอนุญาต โปรดไปที่ Ian Lunn Design Limited Store และซื้อใบอนุญาตเชิงพาณิชย์ที่นี่
สำหรับการใช้งานส่วนตัว/โอเพ่นซอร์ส Hover.css มีให้บริการภายใต้ใบอนุญาต MIT
อ่านใบอนุญาตฉบับเต็ม
สำหรับการใช้งานเชิงพาณิชย์ Hover.css จัดทำขึ้นภายใต้ใบอนุญาตเชิงพาณิชย์ เชิงพาณิชย์แบบขยาย และใบอนุญาตเชิงพาณิชย์แบบ OEM
ซื้อ | อ่านใบอนุญาตฉบับเต็ม
*ยกเว้นแอปพลิเคชันที่อนุญาตให้ผู้ใช้สร้างแอปพลิเคชันแยกกัน ดูใบอนุญาตการค้า OEM
ซื้อ | อ่านใบอนุญาตฉบับเต็ม
หากแอปพลิเคชันของคุณช่วยให้ผู้ใช้ปลายทางสามารถสร้างแอปพลิเคชันแยกต่างหากที่รวมซอฟต์แวร์ของ Ian Lunn Design Limited เช่น ชุดเครื่องมือการพัฒนา ไลบรารี หรือตัวสร้างแอปพลิเคชัน คุณจะต้องได้รับใบอนุญาตเชิงพาณิชย์ของ OEM โปรดติดต่อเราเพื่อขอข้อมูลเพิ่มเติมเกี่ยวกับใบอนุญาตการค้า OEM
ก่อนหน้านี้ Hover.css ได้รับการเผยแพร่ภายใต้ใบอนุญาต MIT สำหรับการใช้งานเชิงพาณิชย์และไม่ใช่เชิงพาณิชย์ ใครก็ตามที่ได้รับใบอนุญาต MIT สำหรับการใช้งานเชิงพาณิชย์ก่อนเวอร์ชัน 2.2.0 (24 มีนาคม 2560) จะสามารถใช้ Hover.css เวอร์ชันก่อนเวอร์ชัน 2.2.0 ต่อไปได้ภายใต้ใบอนุญาตเดียวกันนั้น
หากคุณต้องการอัปเกรดเป็นเวอร์ชัน 2.2.0 ขึ้นไป หรือเพียงแสดงการสนับสนุน Hover.css (เรายินดีอย่างยิ่ง!) โปรดซื้อใบอนุญาตเชิงพาณิชย์ที่เป็นปัจจุบัน ซื้อใบอนุญาตการค้า
Ian Lunn เป็นนักพัฒนาส่วนหน้าอิสระและเป็นผู้เขียน CSS3 Foundations
จ้าง Ian สำหรับเว็บไซต์แบบตอบสนอง เว็บไซต์ WordPress, JavaScript, แอนิเมชัน และการเพิ่มประสิทธิภาพ
