เอฟเฟกต์ CSS Hover สุดเจ๋งที่ใช้การตัดพื้นหลัง มาสก์ และ 3D

เราได้อ่านบทความชุดหนึ่งเกี่ยวกับแนวทางที่น่าสนใจเกี่ยวกับเอฟเฟกต์โฮเวอร์ CSS เราเริ่มต้นด้วย a ตัวอย่างมากมายที่ใช้ CSS background คุณสมบัติจากนั้นย้ายไปที่ text-shadow ทรัพย์สินที่ไหน ในทางเทคนิคแล้วเราไม่ได้ใช้เงาใดๆ. เรายังรวมเข้ากับตัวแปร CSS และ calc() เพื่อเพิ่มประสิทธิภาพโค้ดและทำให้ง่ายต่อการจัดการ

ในบทความนี้ เราจะสร้างสองบทความดังกล่าวเพื่อสร้างภาพเคลื่อนไหว CSS ที่โฮเวอร์ที่ซับซ้อนยิ่งขึ้น เรากำลังพูดถึงการตัดพื้นหลัง, มาสก์ CSS และแม้กระทั่งการทำให้เท้าเปียกด้วยมุมมอง 3 มิติ กล่าวอีกนัยหนึ่ง เราจะสำรวจเทคนิคขั้นสูงในครั้งนี้ และผลักดันขีดจำกัดของสิ่งที่ CSS สามารถทำได้ด้วยเอฟเฟกต์โฮเวอร์!

---

นี่เป็นเพียงรสชาติของสิ่งที่เรากำลังทำ:

เลื่อนเอฟเฟกต์โดยใช้ background-clip

มาพูดถึงกัน background-clip. คุณสมบัติ CSS นี้ยอมรับ a text ค่าของคีย์เวิร์ด ที่ช่วยให้เราใช้การไล่ระดับสีกับ ข้อความ ขององค์ประกอบแทนที่จะเป็นของจริง พื้นหลัง.

ตัวอย่างเช่น เราสามารถเปลี่ยนสีของข้อความเมื่อวางเมาส์เหนือได้เช่นเดียวกับการใช้เครื่องหมาย color คุณสมบัติ แต่วิธีนี้จะทำให้การเปลี่ยนสีเคลื่อนไหว:

ทั้งหมดที่ฉันทำคือเพิ่ม background-clip: text ไปยังองค์ประกอบและ transition background-position. ไม่ต้องซับซ้อนไปกว่านี้แล้ว!

แต่เราสามารถทำได้ดีกว่านี้ถ้าเรารวมการไล่ระดับสีหลายอันเข้ากับค่าการตัดพื้นหลังที่ต่างกัน

ในตัวอย่างนี้ ฉันใช้การไล่ระดับสีที่แตกต่างกันสองแบบและค่าสองค่าด้วย background-clip. การไล่ระดับสีพื้นหลังแรกถูกตัดกับข้อความ (ขอบคุณ text ค่า) เพื่อตั้งค่าสีเมื่อวางเมาส์ไว้ในขณะที่การไล่ระดับสีพื้นหลังที่สองสร้างขีดเส้นใต้ด้านล่าง (ขอบคุณ padding-box ค่า). ทุกสิ่งทุกอย่างคัดลอกมาจาก งานที่เราทำในบทความแรก ของชุดนี้

เอฟเฟกต์โฮเวอร์ที่แถบเลื่อนจากบนลงล่างในลักษณะที่ดูเหมือนสแกนข้อความแล้วระบายสีใน:

ครั้งนี้ฉันเปลี่ยนขนาดของการไล่ระดับสีแรกเพื่อสร้างเส้น จากนั้นฉันก็เลื่อนด้วยการไล่ระดับสีอื่นที่อัปเดตสีข้อความเพื่อสร้างภาพลวงตา! คุณสามารถเห็นภาพสิ่งที่เกิดขึ้นในปากกานี้:

เราแค่ขีดข่วนพื้นผิวของสิ่งที่เราสามารถทำได้ด้วยของเรา background-clipพลังปิง! อย่างไรก็ตาม เทคนิคนี้น่าจะเป็นสิ่งที่คุณต้องการหลีกเลี่ยงการใช้ในการผลิต เนื่องจาก Firefox เป็นที่รู้จักว่ามี a มีรายงานข้อบกพร่องมากมาย ที่เกี่ยวข้องกับ background-clip. Safari มีปัญหาการสนับสนุนเช่นกัน นั่นเหลือเพียง Chrome เท่านั้นที่ได้รับการสนับสนุนอย่างแน่นหนาสำหรับสิ่งนี้ ดังนั้นอาจเปิดไว้ในขณะที่เราดำเนินการต่อ

ไปที่เอฟเฟกต์โฮเวอร์อื่นโดยใช้ background-clip:

คุณอาจคิดว่าอันนี้ดูง่ายสุด ๆ เมื่อเทียบกับสิ่งที่เราเพิ่งพูดถึง – และคุณพูดถูก ไม่มีอะไรแฟนซีที่นี่ ทั้งหมดที่ฉันทำคือเลื่อนการไล่ระดับสีหนึ่งอันในขณะที่เพิ่มขนาดของอีกอันหนึ่ง

แต่เรามาที่นี่เพื่อดูเอฟเฟกต์โฮเวอร์ขั้นสูงใช่ไหม มาเปลี่ยนกันเล็กน้อยเพื่อให้แอนิเมชั่นแตกต่างออกไปเมื่อเคอร์เซอร์ของเมาส์ออกจากองค์ประกอบ เอฟเฟกต์โฮเวอร์เหมือนกัน แต่ตอนจบของแอนิเมชั่นต่างกัน:

เย็นใช่มั้ย? มาแยกรหัสกัน:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

เรามีพื้นหลังสามชั้น — สองการไล่ระดับสีและ background-color กำหนดโดยใช้ --_c ตัวแปรซึ่งเดิมตั้งค่าให้โปร่งใส (#0000). เมื่อโฮเวอร์ เราเปลี่ยนสีเป็นสีขาวและ --_c แปรผันเป็นสีหลัก (--c).

นี่คือสิ่งที่เกิดขึ้นกับสิ่งนั้น transition: อันดับแรก เราใช้การเปลี่ยนแปลงกับทุกอย่าง แต่เราชะลอ color และ background-color by 0.5s เพื่อสร้างเอฟเฟกต์การเลื่อน หลังจากนั้นเราก็เปลี่ยน color และ background-color. คุณอาจสังเกตเห็นว่าไม่มีการเปลี่ยนแปลงทางสายตาเนื่องจากข้อความเป็นสีขาวอยู่แล้ว (เนื่องจากการไล่ระดับสีครั้งแรก) และพื้นหลังถูกกำหนดเป็นสีหลักแล้ว (ด้วยการไล่ระดับสีที่สอง)

จากนั้น เมื่อเลื่อนเมาส์ออก เราจะใช้การเปลี่ยนแปลงทันทีกับทุกสิ่ง (สังเกต 0s ล่าช้า) ยกเว้น color และ background-color ที่มีการเปลี่ยนแปลง ซึ่งหมายความว่าเราใส่การไล่ระดับสีทั้งหมดกลับเป็นสถานะเริ่มต้น อีกครั้ง คุณอาจจะไม่เห็นการเปลี่ยนแปลงทางสายตาเพราะข้อความ color และ background-color เปลี่ยนแล้วเมื่อโฮเวอร์

สุดท้ายเราใช้การซีดจางกับสีและ a background-color เพื่อสร้างส่วนที่เลื่อนเมาส์ออกของแอนิเมชั่น ฉันรู้ มันอาจจะเข้าใจยาก แต่คุณเห็นภาพเคล็ดลับได้ดีขึ้นโดยใช้สีต่างๆ:

วางเมาส์เหนือหลายครั้งแล้วคุณจะเห็นคุณสมบัติที่เคลื่อนไหวเมื่อวางเมาส์เหนือและคุณสมบัติที่เคลื่อนไหวด้วยเมาส์ จากนั้น คุณจะเข้าใจวิธีที่เราเข้าถึงแอนิเมชันที่แตกต่างกันสองแบบสำหรับเอฟเฟกต์โฮเวอร์เดียวกันได้

อย่าลืม เทคนิคการเปลี่ยน DRY ที่เราใช้ ในบทความก่อนหน้าของชุดนี้เพื่อช่วยลดจำนวนโค้ดโดยใช้ตัวแปรเพียงตัวเดียวสำหรับสวิตช์:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

หากคุณสงสัยว่าทำไมฉันถึงใช้ไวยากรณ์ RGB สำหรับสีหลัก นั่นเป็นเพราะฉันจำเป็นต้องเล่นกับความโปร่งใสของอัลฟ่า ฉันยังใช้ตัวแปร --_t เพื่อลดการคำนวณซ้ำซ้อนที่ใช้ใน transition คุณสมบัติ

ก่อนที่เราจะย้ายไปยังส่วนถัดไป นี่คือตัวอย่างเพิ่มเติมของเอฟเฟกต์โฮเวอร์ที่ฉันทำเมื่อสักครู่นี้ซึ่งต้องพึ่งพา background-clip. มันอาจจะยาวเกินไปที่จะให้รายละเอียดแต่ละรายการ แต่ด้วยสิ่งที่เราได้เรียนรู้ไปแล้ว คุณสามารถเข้าใจโค้ดได้อย่างง่ายดาย อาจเป็นแรงบันดาลใจที่ดีในการลองใช้บางส่วนโดยลำพังโดยไม่ต้องดูโค้ด

ฉันรู้ว่าฉันรู้ว่า. สิ่งเหล่านี้เป็นเอฟเฟกต์โฮเวอร์ที่แปลกประหลาดและผิดปกติ และฉันตระหนักดีว่ามันมากเกินไปในสถานการณ์ส่วนใหญ่ แต่นี่คือวิธีการฝึกฝนและเรียนรู้ CSS จำไว้ว่าเรา ก้าวข้ามขีดจำกัด ของเอฟเฟกต์โฮเวอร์ CSS เอฟเฟกต์โฮเวอร์อาจเป็นสิ่งแปลกใหม่ แต่เรากำลังเรียนรู้เทคนิคใหม่ๆ ไปพร้อมกัน ซึ่งสามารถนำไปใช้กับสิ่งอื่นได้อย่างแน่นอน

โฮเวอร์เอฟเฟกต์โดยใช้ CSS mask

คาดเดาอะไร? CSS mask คุณสมบัติใช้การไล่ระดับสีในลักษณะเดียวกับ background คุณสมบัติไม่ ดังนั้นคุณจะเห็นว่าสิ่งที่เรากำลังทำต่อไปค่อนข้างตรงไปตรงมา

เริ่มต้นด้วยการสร้างขีดเส้นใต้แฟนซี

ฉันกำลังใช้ background เพื่อสร้างเส้นขอบด้านล่างแบบซิกแซกในการสาธิตนั้น ถ้าฉันต้องการนำแอนิเมชั่นไปใช้กับขีดเส้นใต้นั้น มันคงจะน่าเบื่อถ้าจะใช้คุณสมบัติพื้นหลังเพียงอย่างเดียว

ป้อน CSS mask.

โค้ดอาจดูแปลกแต่ตรรกะยังคงเหมือนเดิมกับแอนิเมชั่นพื้นหลังก่อนหน้านี้ทั้งหมด ดิ mask ประกอบด้วยการไล่ระดับสีสองแบบ การไล่ระดับสีแรกถูกกำหนดด้วยสีทึบที่ครอบคลุมพื้นที่เนื้อหา (ขอบคุณ content-box ค่า). การไล่ระดับสีครั้งแรกนั้นทำให้ข้อความมองเห็นได้และซ่อนเส้นขอบซิกแซกด้านล่าง content-box คือ mask-clip ค่าซึ่งมีลักษณะเหมือนกับ background-clip

linear-gradient(#000 0 0) content-box

การไล่ระดับสีที่สองจะครอบคลุมพื้นที่ทั้งหมด (ขอบคุณ padding-box). อันนี้มีความกว้างที่กำหนดโดยใช้ --_p ตัวแปร และจะถูกวางไว้ที่ด้านซ้ายขององค์ประกอบ

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

ตอนนี้ สิ่งที่เราต้องทำคือเปลี่ยนค่าของ --_p เมื่อวางเมาส์เหนือเพื่อสร้างเอฟเฟกต์การเลื่อนสำหรับการไล่ระดับสีที่สองและแสดงขีดเส้นใต้

.hover:hover { --_p: 100%; color: var(--c);
}

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

ด้วยกลอุบายดังกล่าว เราสามารถสร้างรูปแบบต่างๆ ได้มากมายโดยเพียงแค่ใช้การกำหนดค่าการไล่ระดับสีที่แตกต่างกันด้วย mask คุณสมบัติ:

แต่ละตัวอย่างในการสาธิตนั้นใช้การกำหนดค่าการไล่ระดับสีที่แตกต่างกันเล็กน้อยสำหรับ mask. โปรดสังเกตเช่นกัน การแยกโค้ดระหว่างการกำหนดค่าพื้นหลังและการกำหนดค่ามาสก์ สามารถจัดการและบำรุงรักษาได้อย่างอิสระ

มาเปลี่ยนการกำหนดค่าพื้นหลังโดยแทนที่การขีดเส้นใต้ซิกแซกด้วยการขีดเส้นใต้หยักแทน:

คอลเลกชันของเอฟเฟกต์โฮเวอร์อีกชุดหนึ่ง! ฉันเก็บการกำหนดค่ามาสก์ทั้งหมดและเปลี่ยนพื้นหลังเพื่อสร้างรูปร่างที่ต่างออกไป ตอนนี้คุณคงเข้าใจแล้วว่าฉันทำได้อย่างไร เพื่อให้ได้เอฟเฟกต์โฮเวอร์ 400 ตัว โดยไม่มีองค์ประกอบเทียม — และเรายังมีอีกมาก!

เช่น ทำไมไม่เป็นแบบนี้:

นี่คือความท้าทายสำหรับคุณ: เส้นขอบในการสาธิตครั้งสุดท้ายคือการไล่ระดับสีโดยใช้ mask ทรัพย์สินที่จะเปิดเผยมัน คุณสามารถหาตรรกะที่อยู่เบื้องหลังแอนิเมชั่นได้หรือไม่? มันอาจจะดูซับซ้อนในแวบแรก แต่มันคล้ายกันมากกับตรรกะที่เราได้ดูสำหรับเอฟเฟกต์โฮเวอร์อื่นๆ ส่วนใหญ่ที่อาศัยการไล่ระดับสี โพสต์คำอธิบายของคุณในความคิดเห็น!

เอฟเฟกต์โฮเวอร์ใน 3D

คุณอาจคิดว่ามันเป็นไปไม่ได้ที่จะสร้างเอฟเฟกต์ 3D ด้วยองค์ประกอบเดียว (และไม่ต้องใช้องค์ประกอบหลอก!) แต่ CSS มีวิธีทำให้มันเกิดขึ้น

สิ่งที่คุณเห็นนั้นไม่ใช่เอฟเฟกต์ 3D ที่แท้จริง แต่เป็นภาพลวงตาที่สมบูรณ์แบบของ 3D ในพื้นที่ 2D ที่รวม CSS background, clip-pathและ transform สรรพคุณ

สิ่งแรกที่เราทำคือการกำหนดตัวแปรของเรา:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

จากนั้นเราสร้างเส้นขอบโปร่งใสที่มีความกว้างที่ใช้ตัวแปรข้างต้น:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

ด้านบนและด้านขวาขององค์ประกอบทั้งสองต้องเท่ากับ --b ค่าในขณะที่ด้านล่างและด้านซ้ายต้องเท่ากับผลรวมของ --b และ --d (ซึ่งก็คือ --_s ตัวแปร).

สำหรับส่วนที่สองของเคล็ดลับ เราต้องกำหนดหนึ่งการไล่ระดับสีที่ครอบคลุมพื้นที่ชายแดนทั้งหมดที่เรากำหนดไว้ก่อนหน้านี้ อา conic-gradient จะทำงานเพื่อสิ่งนั้น:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

เราเพิ่มการไล่ระดับสีอีกส่วนสำหรับส่วนที่สามของเคล็ดลับ ค่านี้จะใช้ค่าสีขาวกึ่งโปร่งแสงสองค่าที่ทับซ้อนกับการไล่ระดับสีก่อนหน้านี้เพื่อสร้างเฉดสีหลักที่แตกต่างกัน ทำให้เราได้ภาพมายาของการแรเงาและความลึก

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

ขั้นตอนสุดท้ายคือการสมัคร a CSS clip-path เพื่อตัดมุมเพื่อให้ได้เงายาว ๆ แบบนี้:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

นั่นคือทั้งหมด! เราเพิ่งสร้างสี่เหลี่ยม 3 มิติโดยไม่มีอะไรนอกจากการไล่ระดับสีสองอันและ a clip-path ที่เราสามารถปรับได้อย่างง่ายดายโดยใช้ตัวแปร CSS ตอนนี้ สิ่งที่เราต้องทำคือทำให้เคลื่อนไหว!

สังเกตพิกัดจากรูปที่แล้ว (ระบุเป็นสีแดง) มาอัปเดตสิ่งเหล่านั้นเพื่อสร้างแอนิเมชั่น:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

เคล็ดลับคือการซ่อนส่วนล่างและด้านซ้ายขององค์ประกอบ เพื่อให้เหลือแต่องค์ประกอบสี่เหลี่ยมที่ไม่มีความลึกใดๆ

ปากกานี้แยก clip-path ส่วนของแอนิเมชั่นเพื่อดูว่ามันกำลังทำอะไร:

สัมผัสสุดท้ายคือการย้ายองค์ประกอบไปในทิศทางตรงกันข้ามโดยใช้ translate — และภาพลวงตาก็สมบูรณ์แบบ! นี่คือเอฟเฟกต์ที่ใช้ค่าคุณสมบัติที่กำหนดเองที่แตกต่างกันสำหรับความลึกที่แตกต่างกัน:

เอฟเฟกต์โฮเวอร์ที่สองเป็นไปตามโครงสร้างเดียวกัน ทั้งหมดที่ฉันทำคืออัปเดตค่าสองสามค่าเพื่อสร้างการเคลื่อนไหวด้านซ้ายบนแทนที่จะเป็นค่าบนขวา

รวมเอฟเฟค!

สิ่งที่ยอดเยี่ยมเกี่ยวกับทุกสิ่งที่เราพูดถึงคือพวกมันเติมเต็มซึ่งกันและกัน นี่คือตัวอย่างที่ฉันกำลังเพิ่ม text-shadow ผลกระทบจากบทความที่สอง ในซีรีส์ถึง background เทคนิคอนิเมชั่นจากบทความแรก ในขณะที่ใช้เคล็ดลับ 3D เราเพิ่งพูดถึง:

โค้ดจริงอาจสร้างความสับสนในตอนแรก แต่ไปข้างหน้าและวิเคราะห์ให้ละเอียดยิ่งขึ้น คุณจะสังเกตเห็นว่าเป็นเพียงการผสมผสานระหว่างเอฟเฟกต์ที่แตกต่างกันสามแบบ ซึ่งค่อนข้างจะรวมกันเป็นหนึ่ง

ให้ฉันจบบทความนี้ด้วยเอฟเฟกต์โฮเวอร์สุดท้ายที่ฉันรวมพื้นหลัง เส้นทางคลิป และเส้นประของ perspective เพื่อจำลองเอฟเฟกต์ 3D อื่น:

ฉันใช้เอฟเฟกต์เดียวกันกับรูปภาพ และผลลัพธ์ก็ค่อนข้างดีสำหรับการจำลอง 3D ด้วยองค์ประกอบเดียว:

ต้องการดูอย่างใกล้ชิดว่าการสาธิตครั้งล่าสุดทำงานอย่างไร ฉันเขียนอะไรบางอย่างขึ้นบนนั้น

ตัดขึ้น

อ๊อฟ เสร็จแล้ว! ฉันรู้ว่า CSS นั้นค่อนข้างซับซ้อน แต่ (1) เราอยู่ในเว็บไซต์ที่ถูกต้องสำหรับสิ่งนั้น และ (2) เป้าหมายคือการผลักดันความเข้าใจของเราเกี่ยวกับคุณสมบัติ CSS ต่างๆ ไปสู่ระดับใหม่โดยอนุญาตให้โต้ตอบได้ ซึ่งกันและกัน.

คุณอาจกำลังถามว่าขั้นตอนต่อไปคืออะไรจากที่นี่ เมื่อเรากำลังจะปิดชุดเอฟเฟกต์ CSS ขั้นสูงชุดเล็กๆ นี้ ฉันจะบอกว่าขั้นตอนต่อไปคือนำทุกสิ่งที่เราเรียนรู้และนำไปใช้กับองค์ประกอบอื่น ๆ เช่นปุ่ม รายการเมนู ลิงก์ ฯลฯ เราเก็บสิ่งต่าง ๆ ค่อนข้างง่ายตราบเท่าที่ จำกัด เทคนิคของเราไว้ที่องค์ประกอบส่วนหัวด้วยเหตุผลที่แน่นอนนั้น ; องค์ประกอบจริงไม่สำคัญ ใช้แนวคิดและดำเนินการเพื่อสร้าง ทดลอง และเรียนรู้สิ่งใหม่!

---

เอฟเฟกต์ CSS Hover สุดเจ๋งที่ใช้การตัดพื้นหลัง มาสก์ และ 3D เผยแพร่ครั้งแรกเมื่อ CSS-เคล็ดลับ. คุณควร รับจดหมายข่าว.

• คอยน์สมาร์ท การแลกเปลี่ยน Bitcoin และ Crypto ที่ดีที่สุดในยุโรป
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าฟรี
• คริปโตฮอว์ก เรดาร์ Altcoin ทดลองฟรี.
• ที่มา: https://css-tricks.com/css-hover-effects-background-masks-3d/