» » Анимированный градиент

Анимированный градиент

Градиент — это плавный переход от одного цвета к другому. А если добавить анимацию или hover-эффект к градиенту, получатся потрясающе красивые элементы для оформления сайта или статьи.
градиент
Где можно использовать на сайте градиент? 
Где угодно - в тексте, в фонах кнопок, цитат, сообщений, оформлять рамки и многое другое. Если ваш сайт оформлен скромно и вы не используете броские цвета, то градиент можно сделать в пастельных тонах. 

Генераторы

Анимированный градиент можно сделать генераторами, и его уже добавлять к нужным элементам на сайте.
https://sarcadass.github.io/granim.js/examples.html - здесь можно найти образцы градиента, которые можно использовать для своих нужд.
https://freetoolonline.com/css-gradient-generator.html - в генераторе можно менять цвет, скорость анимации, расположение цветов. Тут же можно посмотреть ваш вариант градиента.
https://www.gradient-animator.com/ - аналогичный генератор.

Примеры анимированного градиента

Кнопка

Кнопка
<div class="button-container">
<a class="btn-gr" href=""><b><span style="color: white;">Кнопочка</span></b></a></div>
<style>
.button-container {
position:relative;
left:50%;
margin-top:50px;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%)
}
.btn-gr {
display:block;
height:50px;
width:186px;
position:relative;
overflow:hidden;
text-decoration:none;
text-transform:uppercase;
letter-spacing:2px;
color:#fff;
font-size:14px;
text-align:center;
color:#fff
}
.btn-gr:after {
position:absolute;
content:'';
display:inline-block;
background:#3bade3;
background:linear-gradient(45deg,#3bade3 0%,#576fe6 25%,#9844b7 51%,#a6ff08 100%);
height:50px;
width:372px;
z-index:-1;
-webkit-transform:translateX(-280px);
transform:translateX(-280px);
transition:-webkit-transform 400ms ease-in;
transition:transform 400ms ease-in;
transition:transform 400ms ease-in,-webkit-transform 400ms ease-in
}
.btn-gr:hover:after {
-webkit-transform:translateX(-200px);
transform:translateX(-200px)
}
.btn-gr span {
color:#fff;
position:relative;
top:16px
}
}
</style>
Меняем цвет градиента в коде, он выделен красным. У кнопки, при наведении курсора, двигается градиент.

Оформление цитаты

Оформление цитаты
blockquote {
margin: 1em 20px;
background: #f3dfc7 ; /* фон */
padding:10px;
border-width:5px;
border-style:double;
border-color:rgb(89, 35, 26); /* цвет рамки */
font-style: italic ;
}
blockquote:hover {
margin: 1em 20px;
padding:10px;
font-style: italic ;
padding:10px;
border-width:5px;
border-style:double;
border-color:rgb(89, 35, 26); /* цвет рамки */
  background: linear-gradient(-45deg, #e5f1fc, #ecd0b0, #98bcf0, #d6a379); /* цвет фона, при наведении курсора */
  background-size: 400% 400%;
  -webkit-animation: Gradient 10s ease infinite; /* скорость анимации */
  -moz-animation: Gradient 10s ease infinite; /* скорость анимации */
  animation: Gradient 10s 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%
  }
}
Уберите пометки в коде /* ------ */. 
Можно сделать градиент с узорами или полосками (паттерны) и анимировать его. Найти градиенты узорами можно на:
https://leaverou.github.io/css3patterns/
https://freefrontend.com/css-background-patterns/
http://css.yoksel.ru/css-patterns/

Ваши комментарии:

Комментарии со спамом удаляются.