home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีทำ Elements Zoom/Scale Up on Hover ด้วย CSS

เรียนรู้ทำ elements zoom/scale-up on hover ด้วย pure CSS ใช้ transform property transformation method: scale()

Zoom/Scale-Up on Hover

ลอง hover mouse บน box นี้:

มัน scale up 1.5 เท่าของขนาดเดิม — ใหญ่ขึ้น 50% ตอน hover

CSS transform property scale method เพิ่มหรือลดขนาด elements ได้ ทั้ง 3D และ 2D ตัวอย่างนี้ใช้ 2D

สร้างตัวอย่างต้องการ 1 HTML element และ 2 CSS rule-sets

HTML

สร้าง HTML element class zoom-box:

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

CSS

เพิ่ม CSS ใน stylesheet:

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

เสร็จแล้ว!

Code ทำงานอย่างไร

  • สร้าง HTML div element class zoom-box
  • สร้าง 2 rule-sets: static default state .zoom-box และ dynamic hover state .zoom-box:hover
  • Rule-set แรก: cosmetic/size properties (height, width, color) margin center align (optional)
  • สำคัญ: transition property ค่า transform duration .2s (200ms)
  • Rule-set ที่สอง .zoom-box:hover เพิ่ม transform property scale() method พารามิเตอร์ 1.5 = 150% ของขนาดเดิม

Browser Compatibility

Code พร้อม vendor prefixes สำหรับ 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); }

ข้อมูลเพิ่มเติม

สังเกต box element scale up/down ด้วย transition duration เดียวกัน แม้เพิ่ม transition property แค่ .zoom-box class

เพราะ transition property เพิ่มใน original class selector (.zoom-box) values จะ auto-apply ให้ additional selectors attached กับ class นี้ คือ :hover (pseudo-class)

ถ้าเพิ่ม transition property แค่ :hover selector จะ animate แค่ scale-up — ไม่ animate scale down ตอน mouse ออกจาก box จะหดทันที 0s duration — harsh on the eyes

อยาก animation type/duration ต่างกันบน state ต่างๆ (up/down) เพิ่ม transition property ให้ :hover pseudo-class selector ให้ค่าต่างออกไป