一、图片镜头移动效果
图片镜头移动效果是一种非常流行的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/n/183110.html
微信扫一扫 
支付宝扫一扫 