欧美性猛交xxx嘿人猛交_又色又爽又高潮免费观看_精品国产一区二区三区久久影院_青娱乐极品视觉盛宴国产视频

技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

如何使用CSS在鼠標懸停時縮放圖像

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

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

實例

效果

 使用CSS在鼠標懸停時縮放圖像

demodownload

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;屬性作用是當圖片放大時，超出div區域的部分將被隱藏。

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

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

文章參考

相關介紹

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

CSS transition 屬性

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

句法

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

上述屬性的描述如下：

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

CSS transform 屬性

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

句法

transform: none|transform-functions

transform屬性的描述如下：

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

相關文章

x