1

我需要在文本中创建一个滚动图像，我已经使用 CSS3 背景剪辑和动画创建了一个工作版本，但这不是跨浏览器兼容的。

我试过简单地用 jquery 在图像后面滚动图像，文本被切掉，但这会出现调整页面大小、悬停状态等问题。

这是使用关键帧和 -webkit-backround-clip 的 CSS3 版本的小提琴：http: //jsfiddle.net/tbLV6/

  h1 { 
     background: url(image.jpeg) no-repeat;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     -webkit-animation: travelGalaxy 10s linear infinite;
     -moz-animation: travelGalaxy 10s linear infinite;
     -o-animation: travelGalaxy 10s linear infinite;
  }

 @-moz-keyframes travelGalaxy {
    0% {background-position: right top;}
    100% {background-position: left top;}
 }

 @-webkit-keyframes travelGalaxy {
    0% {background-position: right top;}
    100% {background-position: left top;}
 }

是否有任何仅 jQuery / Javascript 的方法可以实现相同的结果？

或者也许是一种替代方法来以一种适用于 IE 的方式完成此任务？

4

1 回答 1

1

这是一个使用 polyfill 的解决方案（Codepen），它在浏览器中用 SVG 替换指定元素，其中 -webkit-background-clip: text 不可用：

http://bit.ly/1wjC6Rc

于 2014-12-12T21:11:53.223 回答