CSS中有许多有趣的动画效果,今天我们来学习两个图片移动的效果。
首先,我们需要将两张图片放在可视区域内。我们可以使用绝对定位将图片固定在页面上。
img { position: absolute; }
接下来,我们将第一张图片向右移动,第二张图片向左移动。这可以通过设置left属性来实现。我们可以设置一个定时器来改变两张图片的位置,以达到运动的效果。代码如下:
var img1 = document.querySelector('#img1'); var img2 = document.querySelector('#img2'); var left1 = 0; var left2 = 0; setInterval(function() { left1 += 1; left2 -= 1; img1.style.left = left1 + 'px'; img2.style.left = left2 + 'px'; },10);
这样就可以实现两张图片向相反方向移动了。如果想让图片回到原来的位置,我们可以在移动到一定距离后,将left属性设置为0。代码如下:
var img1 = document.querySelector('#img1'); var img2 = document.querySelector('#img2'); var left1 = 0; var left2 = 0; setInterval(function() { left1 += 1; left2 -= 1; img1.style.left = left1 + 'px'; img2.style.left = left2 + 'px'; if (left1 === 100) { img1.style.left = 0; left1 = 0; } if (left2 === -100) { img2.style.left = 0; left2 = 0; } },10);
这样两张图片就可以一直来回移动了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。