728x90
728x90
믹스 블렌드모드를 이용해서 간단하게 구현이 가능합니다.
Html
<div id="cursor">
<div class="hover-box"></div>
</div>
Css
<style>
#cursor {
position: absolute;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: var(--point-color);
border-radius: 80%;
z-index: 3333333;
backface-visibility: hidden;
pointer-events: none;
mix-blend-mode: difference;
}
#cursor.hover, #cursor.input{
background:transparent;
}
#cursor .hover-box{
position: absolute;
width: 0px;
height: 0px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
/* border: 1px solid var(--point-color); */
border-radius: 80%;
z-index: 3333333;
/* backface-visibility: hidden; */
transition: 0.15s ease;
font-size: 14px;
color: #000;
font-weight: 700;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
/* filter: invert(100%); */
/* mix-blend-mode: difference; */
}
#cursor.hover .hover-box{
width: 80px;
height: 80px;
transition:0.15s ease;
opacity:.9;
}
</style>
Jquery
<script>
var $mouseCursor = $('#cursor');
function moveCircle(e) {
TweenLite.to($mouseCursor, 0.1, {
css: {
left: e.pageX,
top: e.pageY
}
});
}
$(window).on('mousemove', moveCircle);
$("a").on("mouseenter",function(){
$("#cursor").addClass("hover");
})
$("a").on("mouseleave",function(){
$("#cursor").removeClass("hover");
})
$("button").on("mouseenter",function(){
$("#cursor").addClass("hover");
})
$("button").on("mouseleave",function(){
$("#cursor").removeClass("hover");
})
</script>
반응형
'Code > Html' 카테고리의 다른 글
체크박스 커스텀하기 (0) | 2024.02.05 |
---|---|
Div에 placeholder 구현하기 (0) | 2024.01.15 |
Select 에서 Option 클릭 시 이동 (0) | 2023.12.11 |
배경에 영상 넣기 (0) | 2023.08.11 |
탭 만들기 (페이지 내에서 사용하는) (0) | 2023.02.23 |