Question

你能告诉我css动画中position: numbers %做了什么这些数字如何运作？

body{
  font-family:'Merriweather Sans';
  background:white;
}
#test{
  background:linear-gradient(270deg, #36bf9c, #368ebf, #df5a5f, #eea965);
  color:white;
  background-size:600% 600%;
  padding:20px 450px;
  position:static;
  font-size:40px;
  font-family:"Merriweather Sans";
  animation:gradient 60s ease infinite;
}

@keyframes gradient{
0%{
  background-position: 0% 50%;

}
50%{
  background-position:100% 50%;
}
100%{
  background-position:0% 50%;
}

Answer 1

0％表示CSS将在开始时应用

50％表示指定时间的一半将通过（此处为30秒）

100％表示全职过后。

动画不会立即发生，因此它将伴随很多过渡状态，但在这些时候CSS将是指定的。

Answer 2

背景大小为600％，这意味着显示的视觉区域（#test div）大小的6倍。背景设置为渐变。通过左右移动背景，可以使动画颜色发生变化。

我在示例中添加了一个额外的div来显示渐变。

＆＃13;

body{
  font-family:'Merriweather Sans';
  background:white;
}
#test{
  background:linear-gradient(270deg, #36bf9c, #368ebf, #df5a5f, #eea965);
  color:white;
  background-size:600% 600%;
  padding:20px 450px;
  position:static;
  font-size:40px;
  font-family:"Merriweather Sans";
  animation:gradient 60s ease infinite;
}

#backgroundImage {
  background:linear-gradient(270deg, #36bf9c, #368ebf, #df5a5f, #eea965);
  width:200px;
  height:100px;
   background-size:100% 100%;
 }

@keyframes gradient{
0%{
  background-position: 0% 50%;

}
50%{
  background-position:100% 50%;
}
100%{
  background-position:0% 50%;
}

＆＃13;

<div id="test"></div>
<br>
<div id="backgroundImage"></div>

＆＃13;

用这个css动画代码技术指导我

2 个答案: