代码之家 › 专栏 › 技术社区 › Joel

设置背景位置动画以水平连续移动[复制]

css

Joel · 技术社区 · 8 年前

这个问题已经有了答案:

Background-position not working with CSS animation and linear gradient 1个答案
Use CSS3 transitions with gradient backgrounds 15个答案

我想用CSS水平移动我的背景。

我看过这个 demo 但他们使用的是真实的图像。我希望能够使用rgba/线性渐变代替。

这是我的代码:

.chat {
  width: 490px;
  float: left;
  background: #F2F5F8;
  color: #434651;
  position:absolute;
  overflow:hidden;
}
@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
.chat .chat-header {
  /* padding: 20px; */
  border-bottom: 2px solid white;
  background-image: linear-gradient(135deg, #FF5572, #FF7555);
  width:1000px; /*make bigger in order to move */
  overflow:hidden;
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 4s linear infinite;
}

 <div class="chat">
   <div class="chat-header clearfix">
       <div class="chat-about">
       hi
       </div>
   </div>
 </div>

我希望它的动画方式与演示中相同。我怎样才能做到?

2 回复 | 直到 8 年前

Renzo Calla 8 年前

您可以使用背景位置在图像背景中进行转换,如示例所示。

.chat {
  width: 490px;
  float: left;
  background: #F2F5F8;
  color: #434651;
  position:absolute;
  overflow:hidden;
}
@keyframes animatedBackground {
	0% {
		background-position: 0% 0%
	}
	50% {
		background-position: 0% 100%
	}
	100% {
		background-position: 0% 0%
	}
}
.chat .chat-header {
  /* padding: 20px; */
  border-bottom: 2px solid white;
  background-image: linear-gradient(180deg, #FF5572, blue, #FF5572);
  width:1000px; /*make bigger in order to move */
  overflow:hidden;
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 4s linear infinite;
  margin:0;
  height:400px;
  background-size: 100% 400%;
}

<div class="chat">
   <div class="chat-header clearfix">
       <div class="chat-about">
       hi
       </div>
   </div>
 </div>

corpico 8 年前

.chat {
    background: linear-gradient(134deg, #ff5572, #ff7555);
    background-size: 400% 400%;
    animation: Move 4s ease infinite;
}

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

有一个很好的工具可以在 https://www.gradient-animator.com/