javascript - 如何使网站上的图片移动或连续运动？

Question

如何使用相同宽度和高度的图像在屏幕上从左到右或从右到左连续移动。在此页面上点赞 - https://www.reddit.com/r/Nisekoi/

Answer 1

您可以为此使用 Marquee/css 关键帧/Javascript 实现。但最简单的方法是使用 marquee 或 css

<img class='marquee' src='http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png'>

CSS

.marquee { 
  overflow: hidden;
  position: relative;
  animation: MarqueeLeft linear 18s infinite;
}

@keyframes MarqueeLeft 
{
  0% { right: -100% }
  100% { right: 100% }
}

还有字幕

<marquee direction="left">
    <img  src='http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png'>
 </marquee>

检查 fiddle http://jsfiddle.net/tintucraju/g9t0e3jf/1/