วิธีทำให้องค์ประกอบซูม/ขยายบนโฮเวอร์ด้วย CSS

เรียนรู้วิธีทำให้องค์ประกอบซูม/ขยายขนาดบนโฮเวอร์ด้วย CSS บริสุทธิ์โดยใช้ transform วิธีการแปลงคุณสมบัติ:scale() .

ซูม/ขยายขนาดขึ้นเมื่อวางเมาส์เหนือ

ลองเลื่อนเมาส์ไปที่ช่องนี้:

โดยขยายได้ 1.5 เท่าของขนาดดั้งเดิม — ดังนั้นมันจึงใหญ่ขึ้น 50% เมื่อคุณเลื่อนเมาส์ไปเหนือ (โฮเวอร์)

CSS transform วิธีมาตราส่วนของคุณสมบัติสามารถเพิ่มหรือลดขนาดขององค์ประกอบได้ ทำงานได้ทั้งในรูปแบบ 3D และ 2D ในตัวอย่างง่ายๆ นี้ เราใช้ 2D

ในการสร้างตัวอย่างข้างต้น เราต้องการองค์ประกอบ HTML 1 รายการและชุดกฎ CSS 2 ชุด

HTML

ขั้นแรกให้สร้างองค์ประกอบ HTML ของคุณด้วยคลาสชื่อ zoom-box :

<div class="zoom-box"></div>

The CSS

จากนั้นเพิ่ม CSS นี้ในสไตล์ชีตของคุณ:

.zoom-box {
  background-color:#CF4B32;
  width: 100px;
  height: 100px;
  margin: 32px auto;
  transition: transform .2s; /* Animation */
}

.zoom-box:hover {
  transform: scale(1.5);
}

แค่นั้นแหละ!

วิธีการทำงานของโค้ด

• ขั้นแรก เราสร้างองค์ประกอบ HTML div ด้วยแอตทริบิวต์คลาสที่เรียกว่า zoom-box .
• จากนั้น เราสร้างชุดกฎสองชุดสำหรับคลาสกล่องซูม ชุดหนึ่งสำหรับสถานะเริ่มต้นคงที่ .zoom-box และอีกอันสำหรับสถานะโฮเวอร์แบบไดนามิก .zoom-box:hover .
• ชุดกฎชุดแรกจะได้รับคุณสมบัติด้านความสวยงาม/ขนาด (height, width, color ). margin คุณสมบัติเป็นเพียงการจัดตำแหน่งกล่องให้อยู่ตรงกลาง (ไม่จำเป็น)
• ส่วนสำคัญของ .zoom-box คลาสคือ transition คุณสมบัติที่มีค่า transform และระยะเวลา .2s (200 มิลลิวินาที)
• ในกฎชุดที่สอง .zoom-box:hover เราเพิ่ม transform คุณสมบัติด้วย scale() วิธีการเป็นค่า ต้องใช้พารามิเตอร์ 1.5 ซึ่งเป็นสิ่งที่กำหนดว่าองค์ประกอบกล่องควรเพิ่มขนาดขึ้นเมื่อวางเมาส์เหนือ 1.5 เหมือนพูด 150% ของขนาดเดิม

ความเข้ากันได้ของเบราว์เซอร์

นี่คือโค้ดจากบทช่วยสอนนี้ที่เพิ่มคำนำหน้าผู้จำหน่ายเบราว์เซอร์ ดังนั้นจึงใช้ได้กับเบราว์เซอร์หลักทั้งหมด, Chrome, Firefox, Safari, Opera:

.zoom-box {
	background-color: #cf4b32;
	width: 100px;
	height: 100px;
	margin: 32px auto;
	-webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s; /* Animation */
}

.zoom-box:hover {
	-webkit-transform: scale(1.5);
	        transform: scale(1.5);
}

นานาน่ารู้

สังเกตว่าองค์ประกอบของกล่องจะขยายขนาดขึ้นและลงด้วยระยะเวลา/ระยะเวลาการเปลี่ยนแปลงที่เหมือนกัน แม้ว่าเราจะเพิ่มเฉพาะ transition คุณสมบัติไปยัง .zoom-box ระดับ.

สิ่งนี้เกิดขึ้นเพราะเมื่อ transition เพิ่มคุณสมบัติในตัวเลือกคลาสดั้งเดิม (.zoom-box ) ค่าจะถูกเพิ่มโดยอัตโนมัติในทุกตัวเลือกเพิ่มเติมที่แนบกับชั้นเรียน ในกรณีนี้คือ :hover (เรียกอีกอย่างว่า คลาสหลอก )

หากคุณเพิ่มเฉพาะ transition คุณสมบัติไปยัง :hover (pseudo) คลาสตัวเลือก จากนั้นจะเคลื่อนไหวเฉพาะส่วนที่เพิ่มขนาดขึ้นเท่านั้น ไม่ใช่ลดขนาดลง ทันทีที่คุณย้ายออกนอกองค์ประกอบกล่อง มันจะลดขนาดลงอย่างกะทันหันโดยมีระยะเวลาเป็นศูนย์ (0 วินาที) ซึ่งคุณแทบไม่ต้องการเลย เนื่องจากจะทำให้ตาแข็ง

หากคุณต้องการใช้ประเภทแอนิเมชั่นและระยะเวลาที่แตกต่างกันในสถานะต่างๆ ขององค์ประกอบของคุณ (ขึ้น/ลง) คุณเพียงแค่เพิ่ม transition คุณสมบัติไปยัง :hover pseudo-class selector และให้ค่าต่างกัน