难以置信的纯CSS实现鼠标跟随效果

 class="g-container">
   class="position">

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

 class="g-ball">

.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，方便大家理解. 请看以下图片以了解:

完整的演示，您可以单击此处查看: CodePen Demo-CSS实现鼠标跟随

存在的问题

在上面的演示中，仍然存在许多缺陷，例如

精度太差

您只能控制元素到div所在空间的移动，而不能控制鼠标的确切位置. 为此，我们可以通过增加隐藏div的数量来进行优化. 例如，从100个平铺div增加到1000个平铺div.

锻炼不够柔滑

效果似乎不够柔滑，这可能需要通过合理的缓动功能和适当的延迟来优化.

变干

是的. 掌握了原理之后，让我们看一下使用这种技术可以产生哪些有趣的效果.

CSS鼠标跟随按钮效果

一开始，我通过使用SVG + CSS + JS实现了对CodePen的以下效果，我想知道是否可以仅使用CSS复制它:

CodePen演示-Gooey鼠标关注

好吧，理想是充实的，现实是很骨感的. 单独使用CSS仍然有很多限制.

好的，仅使用CSS来查看破产版本的模拟效果:

有点奇怪. 您可以收敛一点效果. 通过调整颜色和滤镜强度（各种尝试...），可以获得类似效果更好的效果:

演示戳我，CodePen演示-CSS鼠标跟随按钮效果

全屏鼠标跟随

好的，继续，让我们做些更令人眼花. 乱的事情. 好吧，那是浮华的. : sweat_smile:

如果我们控制多个元素，则可以控制多个元素. 然后，多个元素之间的效果会设置不同的过渡延迟，以按顺序延迟运动. 哇，我很想这件事. 例如:

CodePen演示-鼠标跟随PURE CSS MAGIC MIX

如果我们可以更具想象力，那么我们可以碰撞更多的火花:

此效果是我非常喜欢的日本CodePen作者Nakaya Yusuke的作品，源代码: 演示-仅CSS: 水面

鼠标遵循说明

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-293289-1.html

每日福利

如何将Kuku TV连接到互联网？有线和无线两种方法-网络连接设置 阿里巴巴2019年年报: 收入增长51％，云计算令人眼花，乱，优酷继续烧钱 公共关系名词解释和简短回答问题 能看本地视频的播放器hao123新闻频道，聚合全网最新的新闻

热点图片

热点排行

• bnb889,古迹寻踪系列报道之古寺、古祠、古庙（8）
• WMP11超级兔子版 最新版下载
• PotPlayer中文版(高清播放器) v1.6.59685 绿色便携版
• BNB889,替身女友 小说,校园小说排行榜完结
• 快播服务器关闭 从此江湖再无快播
• 够影厅影视
• panqmbu4s Blog – NNRRR
• 第四色400AI*COM,50粉嫩春水