《国产精品岛国久久久久,无码专区人妻糸列日韩精品,一级美国片免费看

技術(shù)頻道 - html技術(shù)

如何使用CSS在鼠標(biāo)懸停時縮放圖像

作者:admin 時間:2022-10-31 10:48:18 瀏覽:

網(wǎng)頁上圖片列表顯示的最流行的效果是，鼠標(biāo)懸停時可縮放圖像，這種效果是如何實現(xiàn)的呢？本文將介紹如何使用CSS在鼠標(biāo)懸停時縮放圖像。

實例

效果

使用CSS在鼠標(biāo)懸停時縮放圖像

demo download

HTML

<div>
  <img src="image.jpg">
</div>

CSS

div{
  width: 300px;
  height: 150px;
  background: rgb(134, 240, 227);
  border: 10px ridge rgb(2, 141, 127);
  overflow: hidden;
}

img {
  width:300px;
  height:150px;
  transition: transform 0.5s;
}
img:hover {
  transform: scale(1.9);
}

完整HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">

<style>
div{
  width: 300px;
  height: 150px;
  background: rgb(134, 240, 227);
  border: 10px ridge rgb(2, 141, 127);
  overflow: hidden;
}

img {
  width:300px;
  height:150px;
  transition: transform 0.5s;
}
img:hover {
  transform: scale(1.9);
}
</style>

</head>

<body>
<div>
  <img src="image.jpg">
</div>

</body>

</html>

代碼解釋

1、圖片的div盒子寬度(width)和高度(height)固定尺寸。

2、圖片的尺寸（width和height）固定。

3、div的overflow: hidden;屬性作用是當(dāng)圖片放大時，超出div區(qū)域的部分將被隱藏。

4、圖片transition: transform 0.5s;屬性作用是設(shè)置圖片以0.5秒的速度進行縮放，這是一個平滑的過渡效果，讓圖片縮放看起來更舒服。

5、圖片 img:hover 是鼠標(biāo)懸停時的偽類元素，transform: scale(1.9); 屬性是表示圖片放大1.9倍。

文章參考

鼠標(biāo)移到圖片上圖片放大【css3實例】

相關(guān)介紹

CSS transition 屬性用于為不同的 HTML 元素添加效果，例如改變元素的寬度、高度、大小和位置。通過使用此屬性，可以使用 transform 屬性和 :hover 偽類元素的組合在鼠標(biāo)懸停時縮放圖像。

CSS transition 屬性

transition 屬性用于在特定時間段內(nèi)改變 CSS 屬性的值，例如寬度、高度、不透明度和變換。它是其他四個屬性的簡寫屬性。

句法

transition: transition-property transition-duration
transition-timing-function transition-delay

上述屬性的描述如下：

transition-property：它用于將過渡設(shè)置為任何 CSS 屬性，例如寬度、高度、不透明度、變換等等。
transition-duration：用于調(diào)整過渡的持續(xù)時間。
transition-timing-function：用于設(shè)置過渡的速度。
transition-delay：它指定轉(zhuǎn)換何時開始或延遲。

CSS transform 屬性

對于 HTML 元素的 2D 和 3D 轉(zhuǎn)換，使用了 CSS 的 transform 屬性。通過利用此屬性，可以修改元素的形狀和大小。它還允許元素旋轉(zhuǎn)、傾斜和縮放。

句法

transform: none|transform-functions

transform屬性的描述如下：

none：用于設(shè)置元素不變換。
transform-function：用于設(shè)置變換屬性的函數(shù)，如rotate()、skew()、translate()和scale()。此外， scale() 函數(shù)在水平和垂直方向上調(diào)整元素的大小。

相關(guān)文章