순수 CSS를 사용하여 마우스 따라가는 효과를 구현하는 방법은 무엇입니까? (자세한 코드 설명)

마우스 따르기(Mouse Follow)는 이름에서 알 수 있듯이 요소가 마우스의 움직임을 따르고 해당 움직임을 한다는 것을 의미합니다. 일반적으로 CSS는 표현을 담당하고 JavaScript는 동작을 담당합니다. 마우스 따라가기의 효과는 동작이며 이를 달성하려면 일반적으로 JS의 도움이 필요합니다.

물론, 이 글의 초점은 CSS를 사용하여 JS에 의존하지 않고 마우스를 따라가는 동작 애니메이션 효과를 시뮬레이션하는 방법을 소개하는 것입니다.

먼저 마우스 팔로우 효과가 어떤 것인지 살펴보겠습니다.

Principle

위의 데모를 예로 들어 CSS를 사용하여 마우스 팔로우를 구현하려면 가장 중요한 점은 다음과 같습니다.

현재 마우스의 위치를 ​​실시간으로 모니터링하는 방법은 무엇입니까?

알겠습니다. 사실 많은 CSS 효과는 "기만"이라는 단어와 불가분의 관계에 있습니다. 현재 마우스가 어디에 있는지 감지하려면 요소로 페이지를 덮기만 하면 됩니다.

100개의 요소를 사용하여 전체 페이지를 덮습니다. 마우스를 올리면 색상이 표시됩니다.

<div class="g-container">
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  ... // 100个
</div>

.g-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}
 
.position {
    position: absolute;
    width: 10vw;
    height: 10vh;
}
 
@for $i from 0 through 100 {
     
    $x: $i % 10;
    $y: ($i - $x) / 10;
     
    .position:nth-child(#{$i + 1}) {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
 
    .position:nth-child(#{$i + 1}):hover {
        background: rgba(255, 155, 10, .5)
    }
}

이 효과를 얻을 수 있습니다:

좋아요, 각 요소의 호버 효과를 제거하면 이때 페이지를 조작하는 것은 실제로 아무런 효과가 없습니다. 그러나 동시에 :hover 의사 클래스를 통해 현재 마우스가 페이지의 어느 범위에 있는지 대략적으로 알 수 있습니다. :hover 伪类，我们又是可以大概得知当前鼠标是处于页面上哪个区间的。

好继续，我们再给页面添加一个元素（圆形小球），将它绝对定位到页面中间：

<div class="g-ball"></div>

.ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmax;
    height: 10vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

最后，我们借助 ~ 兄弟元素选择器，在 hover

@for $i from 0 through 100{
     
    $x: $i % 10;
    $y: ($i - $x) / 10;
     
    .position:nth-child(#{$i + 1}):hover ~ .ball {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
}

rrreee이제 간단한 순수 CSS 마우스 추적 효과가 구현되었습니다. 이해하려면 아래 그림을 보시면 됩니다.

CodePen 데모 - 마우스 따라가기의 CSS 구현

위의 데모를 보면 여전히 많은 결함이 있습니다. 예를 들어

정확도가 너무 낮습니다.

div로 요소 이동 정확한 마우스 위치보다는 마우스가 위치한 공간을 위해 숨겨진 div 수를 늘려 최적화할 수 있습니다. 예를 들어 타일식 div 100개에서 타일식 div 1000개로 늘립니다.

움직임이 충분히 부드럽지 않습니다.

효과가 충분히 부드럽지 않습니다. 이는 합리적인 이징 기능과 적절한 애니메이션 지연을 통해 최적화해야 할 수도 있습니다.

말리세요

응. 이제 원리를 익혔으므로 이 기술을 사용하여 어떤 다른 흥미로운 효과를 만들 수 있는지 살펴보겠습니다.

처음에는 SVG + CSS + JS를 사용하여 구현한 CodePen에서 다음과 같은 효과를 보았습니다. CSS만 사용하여 복사할 수 있는지 궁금했습니다.

CodePen Demo -- 끈적끈적한 마우스 팔로우

• 글쎄, 이상은 매우 통통하지만 현실은 매우 마른 체형입니다. CSS를 사용하는 것만으로는 여전히 많은 제한이 있습니다.

• 하지만 위에서 소개한 방법을 사용하여 마우스 추적을 구현할 수 있습니다.
  CSS 필터 필터: Blur() 대비()를 사용하여 요소 융합을 시뮬레이션할 수 있습니다.
What you do. CSS 필터 기술과 세부 사항을 모릅니다

좋아요, CSS만 사용하여 파산한 시뮬레이션 효과 버전을 살펴보겠습니다.

좀 이상하네요. 조정하여 효과를 약간 억제할 수 있습니다. 색상 및 필터 강도(다양한 시도...)를 적용하고 약간 더 나은 유사한 효과를 얻었습니다.

Demo Click me, CodePen Demo -- CSS 마우스 따라가기 버튼 효과

하나의 요소가 아닌 여러 요소를 제어한다면. 여러 요소 간의 애니메이션 효과는 서로 다른 전환 지연으로 설정되어 순서대로 이동이 지연됩니다. 와, 생각만 해도 신난다. 다음과 같습니다:

CodePen Demo -- 애니메이션을 따라가는 마우스 PURE CSS MAGIC MIX

더 많은 상상력을 발휘할 수 있다면 더 많은 불꽃을 만들 수 있습니다.

이 효과는 Yusuke Nakaya의 작업입니다. 제가 아주 좋아하는 일본 CodePen 작성자, 소스 코드: Demo -- Only CSS: Water Surface

마우스는 지침을 따릅니다

물론 요소의 움직임을 표시할 필요는 없습니다. . 요소의 현재 위치를 캡처하기 위해 페이지를 덮는 div를 사용하는 기술은 마우스 이동 궤적 표시와 같은 다른 효과에도 사용할 수 있습니다.

1. 배경을 덮는 div: 0.5stransition-duration: 0.5s

2、当 hover 到元素背景 div 的时候，改变当前 hover 到的 div 的 transition-duration: 0s，并且 hover 的时候赋予背景色，这样当前 hover 到的 div 会立即展示

3、当鼠标离开 div，div 的 transition-duration 变回默认状态，也就是 transition-duration: 0.5s

3. 마우스가 div를 벗어나면 div의 transition-duration이 기본 상태로 다시 변경됩니다. transition-duration: 0.5s, 배경 색상이 사라지므로 왼쪽 div의 배경 색상이 천천히 투명하게 전환되어 고스트 효과가 발생합니다

CodePen Demo -- 전환 취소

마지막으로

생각지도 못했던 더 흥미로운 CSS를 여기에서 살펴볼 수 있습니다.

CSS-Inspiration -- CSS Inspiration

좋아, 이 글은 여기서 끝납니다. 도움이 되길 바랍니다. :)

이 기사는 다음에서 복제되었습니다: https://www.cnblogs.com/coco1s/p/10481872.html

위 내용은 순수 CSS를 사용하여 마우스 따라가는 효과를 구현하는 방법은 무엇입니까? (자세한 코드 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!