Смена направления градиента по кликуВебКлиент - заказать сайт в Тамбове
город: Тамбов
e-mail: moskwin68@mail.ru

Смена направления градиента по клику

Описание

При клике по кнопке происходит смена направления градиента по часовой стрелке.

HTML

<script src="//code.jquery.com/jquery.min.js"></script>
<button id="direction"></button>
<div id="wrapper"></div>

JQuery

var i = 0;
var arr = [ 'to bottom left', 'to left', 'to top left', 'to top', 'to top right', 'to right', 'to bottom right', 'to bottom'];
$('#direction').click( function() {
 direction = arr[i++ % arr.length];			
 $('#wrapper').css('background', 'linear-gradient(' + direction + ', #be1432, #270b36)');
});

CSS

#wrapper {
background: -webkit-linear-gradient(bottom, #be1432, #270b36);
background: -moz-linear-gradient(bottom, #be1432, #270b36);
background: -o-linear-gradient(bottom, #be1432, #270b36);
background: linear-gradient(to bottom, #be1432, #270b36);
width: 100px;
height: 100px;
}

#direction {
cursor: pointer;
width: 35px;
height: 35px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;  
background-image: url(//xn--90abjbolhs9b.xn--p1ai/wp-content/uploads/2019/04/rotate.png);
background-size: 20px 20px;
background-position: center center;
background-repeat: no-repeat;
background-color: #333;
}

https://jsfiddle.net/8vwh25fL/3/