Невероятный чистый CSS для достижения эффекта следования мыши

внешний интерфейс анимация CSS
Невероятный чистый CSS для достижения эффекта следования мыши

Переходя непосредственно к теме, мышь следует, как следует из названия, элемент будет следовать за движением мыши и совершать соответствующие движения. Что-то вроде этого:

css-mouse-follow gif

Вообще говоря, CSS отвечает за представление, а JavaScript — за поведение. Эффект следования мышью — это поведение, и для его достижения обычно требуется JS.

Конечно, в этой статье основное внимание уделяется тому, как использовать CSS для имитации некоторых эффектов анимации поведения мыши без JS.

принцип

Взяв приведенную выше демонстрацию в качестве примера, чтобы использовать CSS для реализации следования мыши, наиболее важным моментом является:

Как отслеживать, где находится текущая мышь в режиме реального времени?

Хорошо, на самом деле, многие эффекты CSS неотделимы отс завязанными глазамиДва слова. Чтобы отслеживать, где в данный момент находится мышь, нам просто нужно заполнить страницу элементами:

Мы используем 100 элементов, чтобы покрыть всю страницу.При наведении отображается цвет.Основной код SCSS выглядит следующим образом:

<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)
    }
}

Вы можете получить этот эффект:

css-mouse-follow-1 gif

Хорошо, если удалить эффект наведения каждого элемента, то работа со страницей в это время фактически не будет иметь никакого эффекта. Но в то же время по:hoverПсевдокласс, мы можем примерно знать, в каком интервале на странице находится текущая мышь.

Хорошо, давайте добавим на страницу еще один элемент (круглый шар) и расположим его абсолютно посередине страницы:

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

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

Наконец, мы используем~Селектор родственных элементов при наведении курсора на страницу (фактически сотня скрытых элементов div при наведении курсора) управляет положением шарообразного элемента через элемент div, над которым в данный момент находится курсор.

@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;
    }
}

Таким образом, простая мышь с чистым CSS для достижения эффекта достигается, чтобы облегчить понимание, взгляните на эту диаграмму ниже, чтобы понять:

css-mouse-follow-2 gif

Полная ДЕМО, вы можете нажать здесь, чтобы увидеть:Демонстрация CodePen — CSS реализует следование мыши

существующие проблемы

Что касается приведенной выше демонстрации, в ней все еще много недостатков, таких как

плохая точность

Вы можете контролировать только перемещение элемента в пространство, где находится div, а не точное положение мыши, для этого мы можем оптимизировать, увеличив количество скрытых div. Например, чтобы увеличить количество элементов div со 100 до 1000.

Движение не достаточно гладко

Эффект выглядит недостаточно плавным, и его, возможно, потребуется оптимизировать с помощью разумной функции плавности и соответствующей задержки анимации.

высохнуть

Эм. Принцип освоен, давайте посмотрим, какие интересные эффекты можно повозить с помощью этой техники.

CSS эффект следования мыши за кнопкой

Сначала я увидел следующий эффект на CodePen, используяSVG + CSS + JSЧтобы реализовать, я подумал, используя только CSS, я могу скопировать его:

css-mouse-follow-3gif

CodePen Demo -- Gooey mouse follow

Ну в идеале очень пухлые, в реальности очень худенькие. При использовании только CSS все еще есть много ограничений.

Хорошо, вот взгляните на сломанную версию симуляции, использующую только CSS:

css-mouse-follow-4 gif

Это слишком странно, вы можете немного сблизить эффект и получить немного лучший похожий эффект, настроив цвет и силу фильтра (то есть различные попытки...):

css-mouse-follow-5 gif

Демонстрация poke me, CodePen Demo -- CSS-эффект кнопки следования мыши

Полноэкранная анимация следования мыши

Хорошо, давай, давайте сделаем что-нибудь более ослепительное. Ну, это такая яркая штука. :пот_улыбка:

Если мы контролируем не один элемент, а несколько элементов. Затем для эффектов анимации между несколькими элементами устанавливается разное значение transition-delay, и движение последовательно задерживается. Ничего себе, это заставляет меня волноваться, чтобы думать об этом. Например:

css-mouse-follow-6 gif

Демонстрация CodePen — анимация следования мыши PURE CSS MAGIC MIX

Если бы мы могли быть более изобретательными, то мы могли бы столкнуться с немного большим количеством искр:

css-mouse-follow-7 gif

Этот эффект — работа Юсуке Накая, японского автора CodePen, который мне очень нравится, исходный код:Demo -- Only CSS: Water Surface

мышь следовать указаниям

Конечно, нет необходимости указывать движение элемента. Техника использования div для заполнения страницы для захвата текущего положения элемента также может использоваться для других эффектов, таких как указание движения мыши:

css-mouse-follow-8 gif

  1. Div по умолчанию с полным фономtransition-duration: 0.5s
  2. При наведении курсора на фоновый элемент div измените текущее наведение на divtransition-duration: 0s, и задайте цвет фона при наведении, чтобы сразу отображался div, на который прибывает текущее наведение
  3. Когда мышь покидает div, divtransition-durationвернуться к состоянию по умолчанию, котороеtransition-duration: 0.5s, и цвет фона одновременно исчезает, поэтому цвет фона оставшегося элемента div будет медленно переходить в прозрачный, что приведет к эффекту призрака.

CodePen Demo -- cancle transition

наконец

На самом деле, есть много интересных вариантов использования, желающие студенты могут сделать это сами, а еще попробовать и комбинировать.

Меня часто спрашивают, можно ли использовать эти странные обычаи в реальном бизнесе? Это полезно или нет. Что ж, мое мнение таково, что, возможно, это действительно не используется в бизнесе или сценарии применения крайне ограничены, но если вы знаете больше, вы можете делать больше выборов, когда сталкиваетесь с проблемами, иметь больше пространства для размышлений и иметь лучшее дивергентное мышление, по крайней мере Безобидный.

Более интересный CSS, о котором вы, возможно, даже не подозревали, вы можете посмотреть здесь:

CSS-вдохновение -- CSS-вдохновение

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории