मैं एक क्षैतिज आयत आकार एनीमेशन के रूप में आउटपुट बनाना चाहता हूं, इसमें पूरे पृष्ठ को कवर नहीं करना चाहिए, मैं ऑनलाइन खोज कर रहा हूं लेकिन समाधान खोजने में असमर्थ हूं, कृपया मेरी मदद करें। बहुत धन्यवाद। मुझे नीचे जैसा आउटपुट चाहिए:

enter image description here

.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>
1
Tom 10 जून 2019, 19:26

1 उत्तर

सबसे बढ़िया उत्तर

कुछ कीफ्रेम और एक बुनियादी डिव टैग के साथ आप इसे आसानी से अनुकूलित कर सकते हैं। जहां आप चाहते हैं वहां स्थिति के लिए जेड-इंडेक्स का प्रयोग करें।

ऊंचाई को नियंत्रित करने के लिए आप ढाल को एक सापेक्ष div में लपेट सकते हैं और सीएसएस का उपयोग करके ऊंचाई को अलग से नियंत्रित कर सकते हैं।

@-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>
1
brooksrelyt 10 जून 2019, 19:24