CSS移動圖片效果

一、圖片鏡頭移動效果

圖片鏡頭移動效果是一種非常流行的CSS圖片移動效果之一。它通過CSS3中的transform屬性來實現。在此之前，需要先在CSS中設置background-image屬性進行圖像的展示。接著使用滑鼠懸停事件進行圖片的移動，移動距離和方向可以通過CSS3的transform屬性來實現。

.bg {
  background-image: url('image.jpg');
  background-size: cover;
  width: 600px;
  height: 400px;
}

.bg:hover {
  transform: scale(1.2) translateX(20px) translateY(-20px);
}

以上代碼實現了當滑鼠懸停在class為bg的元素上時，圖片會被放大1.2倍並右移20px，上移20px。通過控制translateX和translateY屬性，可以實現圖片在不同的方向上移動。

二、剪映圖片移動效果

剪映是一個視頻剪輯軟體，它的一個特點就是能夠添加圖片的移動效果，從而讓整個視頻看起來更加生動。這種移動效果可以通過CSS3中的transition屬性來實現。transition屬性可以讓一系列指定的屬性在一定時間內平滑地過渡到新值，從而呈現齣動畫效果。

img {
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s ease-in-out;
}

img:hover {
  transform: scale(1.1) rotate(10deg) translate(50px, 50px);
}

以上代碼實現了當滑鼠懸停在圖片上時，圖片會被放大1.1倍、旋轉10度，並向右下方移動50px。通過控制transition屬性中的時間長度和緩動函數，可以實現不同的移動效果。

三、抖音圖片移動效果

抖音是一款火爆的短視頻應用，它的一個特點就是能夠添加圖片的移動效果，從而讓視頻效果更加生動。這種移動效果可以通過CSS3中的animation屬性來實現。animation可以讓一系列關鍵幀在一定時間內播放，從而呈現齣動畫效果。

img {
  position: absolute;
  left: 0;
  top: 0;
  animation: move 2s ease-in-out infinite;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

以上代碼實現了圖片在水平方向上來回移動。通過控制animation屬性中的時間長度、緩動函數和關鍵幀的百分比，可以實現不同的移動效果。

四、js圖片移動效果

在不支持CSS3的瀏覽器中，可以使用JavaScript來實現圖片的移動效果。通過監聽滑鼠事件，獲取滑鼠的坐標，然後通過改變圖片的left和top屬性來實現圖片的移動效果。

var img = document.querySelector('img');

img.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  
  img.style.left = x + 'px';
  img.style.top = y + 'px';
});

以上代碼實現了當滑鼠在圖片上移動時，圖片也會跟隨移動。通過改變滑鼠事件和修改left和top屬性的值，可以實現不同的移動效果。

五、html圖片移動效果

相比於CSS3和JavaScript，HTML5對圖片的移動效果支持程度較低。不過在一些特殊情況下，使用HTML標籤也能夠實現一些特殊的移動效果。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/183110.html