创建 CSS3 动画渐变背景

Question

我想将输出创建为水平矩形大小的动画，它不应覆盖整个页面，我正在网上搜索但找不到解决方案，请帮助我。非常感谢。我想要如下输出：

.heading {
 width: 100wh; 
 height: 90vh;
 color: #fff;
 background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
 background-size: 200% 200%;
 -webkit-animation: Gradient 15s ease infinite;
 -moz-animation: Gradient 15s ease infinite;
 animation: Gradient 15s ease infinite;
    }

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

<head>
    <title>Pure CSS3 Gradient Background Animation</title>  
    <link rel="stylesheet" href="abc.css">  
</head>

<body>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css? 
    family=Open+Sans:300" type="text/css" />

    <div class="heading">Pure CSS3 Animated Gradient Background</div>
  
</body>

Answer 1

使用一些关键帧和一个基本的 div 标签，您可以轻松地对其进行自定义。使用 z-index 定位您想要的位置。

要控制高度，您可以将渐变包裹在相对 div 中，并使用 CSS 单独控制高度。

@-webkit-keyframes gradFade {
  0%,
  100% {
    background-position: 0 50%
  }
  50% {
    background-position: 100% 50%
  }
}

@-moz-keyframes gradFade {
  0%,
  100% {
    background-position: 0 50%
  }
  50% {
    background-position: 100% 50%
  }
}

@keyframes gradFade {
  0%,
  100% {
    background-position: 0 50%
  }
  50% {
    background-position: 100% 50%
  }
}

.custom-container {
  height: 50vh;
  position: relative;
  display: block;
}
.bg-overlay {
  background: linear-gradient(270deg, #fd03d2, #fd4703, #fded03, #03f0fd);
  background-size: 400%;
  -webkit-animation: gradFade 20s ease infinite;
  -moz-animation: gradFade 20s ease infinite;
  animation: gradFade 20s ease infinite;
  height: 100%;
  width: 100%;
}

<div class="custom-container">
  <div class="bg-overlay"></div>
</div>

创建 CSS3 动画渐变背景

Creating CSS3 Animated Gradient Background

html

css

animation

gradient