형광펜 효과 만들기

<div class="textbox">
  <span class="desc">반갑습니다 지금부터 여기에 형광펜 효과를 만들겁니다!</span>
</div>


<style>
  .desc{
  	background: linear-gradient(to right,rgba(255,255,255,0) 50%, greenyellow 50%);
  	background-size:200%;
  	transition: .35s;
  	font-size:30px;
  	color:green;
  }
  .desc:hover{
  	background-position:-100% 0;
  }
</style>

linear-gradient 를 이용해서 두가지 색상을 50% 씩 나눠 가진다. (투명, 형광)

백그라운드 사이즈는 span의 두배 사이즈라서 200%로 한다.

transition 을 이용해서 천천히 반응하게 만든다.

:hover 를 하게 되면, 사진이 이동하게 된다.