-2

Каким образом можно менять цвет в каком-то направлении без использования javascript?

1 ответ 1

2

.wrapper {
  width: 200px;
  height: 70px;
  background-color: black;
  cursor: pointer;
  position: relative;
  overflow: hidden;  
  color: #fff;
}
.wrapper:before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,128,0,1) 0%,rgba(0,128,0,1) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%);
  transition: left .7s;
}
.wrapper:hover:before{
  left: 0;
}
.block{
  position: relative;
  height: 100px;
}
<div class="wrapper">
   <div class="block"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.