Question

我需要在文本中创建滚动图像，我使用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上运行的方式完成此任务的替代方法？

Answer 1

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

http://bit.ly/1wjC6Rc

是否有一个jQuery相当于CSS3 background-clip？

1 个答案: