형광펜 효과 만들기
반갑습니다 지금부터 여기에 형광펜 효과를 만들겁니다!
<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
를 하게 되면, 사진이 이동하게 된다.
Author And Source
이 문제에 관하여(형광펜 효과 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bbnerino/형광펜-효과-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)