>  기사  >  웹 프론트엔드  >  CSS 마우스 포인터 상호 작용 효과에 대한 심층 탐구

CSS 마우스 포인터 상호 작용 효과에 대한 심층 탐구

青灯夜游
青灯夜游앞으로
2022-06-24 13:50:082435검색

오늘은 이러한 흥미로운 상호작용 효과를 구현해 보겠습니다. 이 교환 효과를 통해 프런트엔드 마우스 포인터 상호작용에 대해 이야기해 보겠습니다.

원래 마우스 포인터 스타일을 원하는 효과로 수정하고 특별한 대화형 효과를 추가하세요. [추천 학습: 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%;
}

那么,在页面上,我们就得到了一个圆形黑点:

CSS 마우스 포인터 상호 작용 효과에 대한 심층 탐구

接着,通过事件监听,监听 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 라운드를 얻습니다. 검은색 점: 🎜🎜🎜1 .png🎜🎜🎜그런 다음 이벤트 모니터링을 통해 본체에서 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제