Question

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

我看过这个demo，但他们使用的是实际图像。我希望能够改用rgba / linear-gradient。

这是我的代码：

double

<mat-step *ngFor="let stepFormGroup of stepFormGroups;
 let i = index " [stepControl]="stepFormGroup">
    <form [formGroup]="stepFormGroup">...

我希望它以与演示相同的方式进行动画处理。我将如何实现？

Answer 1

.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/

处有一个很棒的工具可以处理渐变动画

Answer 2

您可以像示例一样使用背景位置在图像背景中进行平移。

.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>

为背景位置设置动画以连续水平移动

2 个答案: