Многие понимают, что фон является одним из главных элементов дизайна на сайте. Так как он создает внешний вид интернет ресурса, где также оказывает значительное влияние на просмотр или удобство работать на сайте.
В стилистике CSS, основа фона задается сплошным цветом, изображением или градиентом. Как все можно это реализовать, то изначально должны знать, где каждый фон вносит свой оригинальный вклад в общий вид нашего сайта.
Существует так много разных факторов, которые могут отличаться от страницы к странице, но для начала лучше всего обратиться к триггерам CSS. На сайте показано, какие свойства CSS заставят браузер выполнять больше операций рендеринга при первой загрузке.
CSS
Код
body{
background-color: silver;
animation:changecolor 25s infinite;
}
@-webkit-keyframes changecolor{
0%{background-image: linear-gradient(40deg , #ef480a , #ec9b04);}
20%{background-image: linear-gradient(80deg ,#b144cc ,#825dce );}
40%{background-image: linear-gradient(120deg , #FF69B4 ,#FF1493 );}
60%{background-image: linear-gradient(160deg ,#8B008B ,#BDB76B );}
80%{background-image: linear-gradient(200deg ,#20B2AA ,#87CEFA );}
100%{background-image: linear-gradient(240deg , #ADFF2F , #008000);}
}
Демонстрация
Чистая CSS3 градиентная фоновая анимация
Здесь аналогично несколько фоновых оттенков цвета, но уже смена происходит совершенно по другому.
HTML
Код
<h1>ZorNet - портал для вебмастера</h1>
CSS
Код
body {
width: 100wh;
height: 90vh;
color: #ededf3;
background: linear-gradient(-45deg, #e26640, #d0296a, #189bca, #1dbb96);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
Демонстрация
