Question

这是我的第一篇文章，我想知道是否有人可以帮助我，我想在适合页面的标题中创建渐变动画背景。

header {
  background: linear-gradient(-45deg, #f3a9cb, #c1a5ce, #97c5ea, #fdd1a3);
  background-size: 400% 400%;
  animation: gradient 8s infinite;
  margin-bottom: 50px;
  padding: 10% 10% 18% 10%;
  border-radius: 0 0 50px 50px;
  box-shadow: 0px 0px 0 0 rgba(0, 0, 0, 1), 0 0 45px 5px rgba(0, 0, 0, 0.4);
}

Answer 1

这对我有用，记住你可以调整关键帧动画，但你喜欢尝试使用这些值

div {
  background: linear-gradient(-45deg, #f3a9cb, #c1a5ce, #97c5ea, #fdd1a3);
  background-size : 400% 400%;
  animation: gradient 8s infinite;
  padding: 10% 10% 18% 10%;
  width: 100vw;
  height: 100vh;
  border-radius: 0 0 50px 50px;
  box-shadow: 0px 0px 0 0 rgba(0, 0, 0, 1), 0 0 45px 5px rgba(0, 0, 0, 0.4);
}

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

<div></div>

CSS 渐变标题动画适合全开屏幕

1 个答案: