Создание CSS3 анимированного градиентного фона - PullRequest
Новая
       9

Создание CSS3 анимированного градиентного фона

0 голосов
/ 10 июня 2019

Я хочу создать вывод в виде анимации горизонтального прямоугольника, он не должен охватывать всю страницу, я ищу в Интернете, но не могу найти решение, пожалуйста, помогите мне. Большое спасибо. Я хочу вывод, как показано ниже:

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 Ответ

1 голос
/ 10 июня 2019

С некоторыми ключевыми кадрами и базовым тегом div вы можете легко это настроить.Используйте z-index, чтобы расположить, где вы хотите.

Чтобы контролировать высоту, вы можете обернуть градиент в относительный делитель и управлять высотой отдельно, используя 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>
...