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动画渐变背景

1 个答案: