• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Установка фона со сменой градиента CSS (CSS3 Animation - изменить цвет фона (линейный градиент))
Установка фона со сменой градиента CSS
Kosten
Дата: Четверг, 2019-01-31, 19:36 | Сообщение 1
Администраторы
Сообщений:19882
Награды: 56


Многие понимают, что фон является одним из главных элементов дизайна на сайте. Так как он создает внешний вид интернет ресурса, где также оказывает значительное влияние на просмотр или удобство работать на сайте.

В стилистике 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;
}


Демонстрация
Прикрепления: 3209659.png(51.3 Kb) · 5700228.png(33.0 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Установка фона со сменой градиента CSS (CSS3 Animation - изменить цвет фона (линейный градиент))
  • Страница 1 из 1
  • 1
Поиск: