오늘은 이러한 흥미로운 상호작용 효과를 구현해 보겠습니다. 이 교환 효과를 통해 프런트엔드 마우스 포인터 상호작용에 대해 이야기해 보겠습니다.
원래 마우스 포인터 스타일을 원하는 효과로 수정하고 특별한 대화형 효과를 추가하세요. [추천 학습: css 동영상 튜토리얼]
우선 첫 번째 질문으로, 위 그림에서 마우스 포인터 스타일이 점으로 수정되었음을 알 수 있습니다.
일반적으로 다음과 같아야 합니다.
물론 CSS에서는 cursor
스타일을 통해 마우스 포인터 모양을 수정할 수 있습니다. cursor
样式,对鼠标指针形状进行修改。
cursor
修改鼠标样式cursor CSS 属性设置鼠标指针的类型,在鼠标指针悬停在元素上时显示相应样式。
cursor: auto; cursor: pointer; ... cursor: zoom-out; /* 使用图片 */ cursor: url(hand.cur) /* 使用图片,并且设置 fallback 兜底 */ cursor: url(hand.cur), pointer;
这个大家应该都清楚,通常而言,在不同场景下,选择不同鼠标指针样式,也是一种提升用户体验的手段。
当然,在本交互中,我们并非要将 cursor 光标设置成任一样式,刚好相反,我们需要将他隐藏。
cursor: none
隐藏光标在这里,我们通过 cursor: none
隐藏页面的鼠标指针:
{ cursor: none; }
如此一来,页面上的鼠标指针就消失了:
既然,消失了,我们就简单模拟一个鼠标指针。
我们首先实现一个 10px x 10px
的圆形 div,设置为基于 绝对定位:
<div></div>
#g-pointer { position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: #000; border-radius: 50%; }
那么,在页面上,我们就得到了一个圆形黑点:
接着,通过事件监听,监听 body 上的 mousemove
,将小圆形的位置与实时鼠标指针位置重合:
const element = document.getElementById("g-pointer"); const body = document.querySelector("body"); function setPosition(x, y) { element.style.transform = `translate(${x}px, ${y}px)`; } body.addEventListener('mousemove', (e) => { window.requestAnimationFrame(function(){ setPosition(e.clientX - 5, e.clientY - 5); }); });
这样,如果不设置 cursor: none
,将会是这样一个效果:
再给 body 加上 cursor: none
,就相当于模拟了一个鼠标指针:
在这个基础上,由于现在的鼠标指针,实际上是个 div
,因此我们可以给它加上任意的交互效果。
以文章一开头的例子为例,我们只需要借助混合模式 mix-blend-mode: exclusion
cursor
를 사용하여 마우스 스타일을 수정하세요
cursor CSS 속성을 사용하여 마우스 포인터 유형을 설정하고 마우스 포인터가 요소 위에 있을 때 해당 스타일을 표시합니다.
Lorem ipsum dolor sit amet
<div></div> <div></div>
모두가 이것을 알아야 합니다. 일반적으로 다양한 시나리오에서 다양한 마우스 포인터 스타일을 선택하는 것도 사용자 경험을 향상시키는 방법입니다.
물론 이 상호작용에서는 커서를 어떤 스타일로도 설정하고 싶지 않고 반대로 숨겨야 합니다 .
cursor: none
을 통해 커서 숨기기
cursor: none
을 통해 페이지의 마우스 포인터를 숨깁니다.
body { cursor: none; background-color: #fff; } #g-pointer-1, #g-pointer-2 { position: absolute; top: 0; left: 0; width: 12px; height: 12px; background: #999; border-radius: 50%; background-color: #fff; mix-blend-mode: exclusion; z-index: 1; } #g-pointer-2 { width: 42px; height: 42px; background: #222; transition: .2s ease-out; }이렇게 자, 페이지의 마우스 포인터가 사라집니다: 🎜🎜🎜🎜🎜🎜🎜글로벌 이벤트 모니터링을 통해 마우스 포인터 시뮬레이션🎜🎜🎜이제 사라지니 마우스 포인터만 시뮬레이션해 보겠습니다. 🎜🎜먼저
를 기반으로 절대 위치 지정으로 설정된 10px x 10px
원형 div를 구현합니다. 🎜const body = document.querySelector("body"); const element = document.getElementById("g-pointer-1"); const element2 = document.getElementById("g-pointer-2"); const halfAlementWidth = element.offsetWidth / 2; const halfAlementWidth2 = element2.offsetWidth / 2; function setPosition(x, y) { element.style.transform = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`; element2.style.transform = `translate(${x - halfAlementWidth2}px, ${y - halfAlementWidth2}px)`; } body.addEventListener('mousemove', (e) => { window.requestAnimationFrame(function(){ setPosition(e.clientX, e.clientY); }); });
{ pointer-events: none; }🎜그런 다음 페이지에서 A 라운드를 얻습니다. 검은색 점: 🎜🎜🎜🎜🎜🎜그런 다음 이벤트 모니터링을 통해 본체에서
mousemove
를 듣고 작은 원의 위치를 실시간 마우스 포인터 위치와 일치시킵니다. 🎜rrreee🎜이렇게 하면 cursor: none
을 설정하지 않으면 다음과 같은 효과가 발생합니다: 🎜🎜🎜🎜🎜🎜본문에 cursor: none
을 추가합니다. 이는 마우스 시뮬레이션과 같습니다. 포인터: 🎜🎜🎜🎜🎜🎜이를 바탕으로 현재 마우스 포인터는 실제로 div
이므로 🎜상호작용 효과를 추가할 수 있습니다🎜. 🎜🎜 기사 시작 부분의 예를 예로 들면, 시뮬레이션된 마우스 포인터가 다른 배경에서 지능적으로 자체적으로 변경되도록 하려면 혼합 모드 mix-blend-mode: Exclusion
만 사용하면 됩니다. 색상 색상. 🎜🎜🎜블렌딩 모드 기술에 대해 여전히 질문이 있는 경우 제 기사를 읽어보세요. 블렌딩 모드를 사용하여 텍스트를 배경색에 지능적으로 적용🎜🎜https://github.com/chokcoco/iCSS/issues/ 169🎜🎜 🎜전체 코드: 🎜🎜rrreeerrreeerrreee🎜질문 그림의 효과를 완벽하게 복원할 수 있습니다. 🎜🎜🎜🎜🎜🎜🎜🎜전체 코드를 보려면 여기를 클릭하세요: 마우스 커서 전환🎜🎜https://codepen .io/ 초코코/pen/rNJQXXV🎜有一点需要注意的是,利用模拟的鼠标指针去 Hover 元素,Click 元素的时候,会发现这些事件都无法触发。
这是由于,此时被隐藏的指针下面,其实悬浮的我们模拟鼠标指针,因此,所有的 Hover、Click 事件都触发在了这个元素之上。
当然,这个也非常好解决,我们只需要给模拟指针的元素,添加上 pointer-events: none
,阻止默认的鼠标事件,让事件透传即可:
{ pointer-events: none; }
当然,这里核心就是一个鼠标跟随动画,配合上 cursor: none
。
而且,鼠标跟随,我们不一定一定要使用 JavaScript。
我在 不可思议的纯 CSS 实现鼠标跟随 一文中,介绍了一种纯 CSS 实现的鼠标跟随效果,感兴趣的也可以看看。
https://github.com/chokcoco/iCSS/issues/46
基于纯 CSS 的鼠标跟随,配合 cursor: none
,也可以制作出一些有意思的动画效果。像是这样:
CodePen Demo -- Cancle transition & cursor none
https://codepen.io/Chokcoco/pen/gOvZoVv
(学习视频分享:web前端)
위 내용은 CSS 마우스 포인터 상호 작용 효과에 대한 심층 탐구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!