如何动画背景图像在文本后面移动？

Question

我正在为一个投资组合的虚拟网站工作。

到目前为止，它看起来像这样：

我想要做的是让蓝天图像不断向右滚动，所以看起来云正在标题文本中移动。

这是我现在对文本的CSS：

#site-title {
font-size: 20em;
background: url('../../img/colors.jpg') no-repeat bottom center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

是否有可能使云背景无限向右移动而不影响文本？

感谢您的帮助。

Answer 1

您可以使用关键帧来实现此效果。

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

#animate-area   { 
    width: 560px; 
    height: 400px; 
    background-image: url(bg-clouds.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;

    animation: animatedBackground 40s linear infinite;
}

请参阅code example and demo here。

Answer 2

.text { 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
   background-image: url(yourimage.jpg);
   background-size: 300% 300% !important;
   -webkit-animation: Gradient 10s ease-in-out infinite;
   -moz-animation: Gradient 10s ease-in-out infinite;
   animation: Gradient 10s ease-in-out infinite;
   margin:15px 0;
   font-size: 45px;
}
@-webkit-keyframes Gradient {
     0% {
         background-position: 0% 50% 
    }
     50% {
         background-position: 100% 50% 
    }
     100% {
         background-position: 0% 50% 
    }
}
 @-moz-keyframes Gradient {
     0% {
         background-position: 0% 50% 
    }
     50% {
         background-position: 100% 50% 
    }
     100% {
         background-position: 0% 50% 
    }
}
 @keyframes Gradient {
     0% {
         background-position: 0% 50% 
    }
     50% {
         background-position: 100% 50% 
    }
     100% {
         background-position: 0% 50% 
    }
}