【100DAYSCSS#90】追踪鼠标

Day #90
Mouse Trap: Not the trap for real mice, but your cursor will get trapped on hover.

追踪鼠标效果代码如下：

<div class="frame"><span class="moveBlock"></span>
</div>
<style>
.moveBlock {position: absolute;width: 50px;height: 50px;background: skyblue;
}
</style>
<script>
document.addEventListener('mousemove',function (e) {let frame=document.querySelector('.frame')let moveBlock=e.target.querySelector('.moveBlock')if (moveBlock) {if (e.clientY>frame.offsetTop && e.clientY<frame.offsetTop+400 && e.clientX>frame.offsetLeft && e.clientX<frame.offsetLeft+400) {moveBlock.style.top=e.clientY-frame.offsetTop+'px';moveBlock.style.left=e.clientX-frame.offsetLeft+'px';}}
})
</script>

镭射线效果没思路，没时间想了，看看答案。！！！没用JS！！！，行，又是SCSS，完整代码
Slim语法

.frame.space-for i in (1..380)div class="trigger trigger-#{i}" οnclick="void(0);".lines-for j in (1..19)div class="line line-#{j}".left.right

SCSS语法

$rows: 19; // sync with html
$columns: 20; // sync with html.frame {position: absolute;top: 50%;left: 50%;width: 400px;height: 400px;margin-top: -200px;margin-left: -200px;border-radius: 2px;box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.25);overflow: hidden;background: #2980b9;color: #fff;font-family: 'Open Sans', Helvetica, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.space {height: 10px;
}.trigger {position: relative;z-index: 10;box-sizing: border-box;float: left;width: 20px;height: 20px;
}.lines {position: absolute;top: 0;left: 0;right: 0;bottom: 0;.line {margin: 19px 0px;height: 1px;width: 400px;.left, .right {float: left;height: 1px;width: 200px;background: #fff;transform-origin: 0 50%;transition: all .3s linear;transform: scaleX(0);}.right {transform-origin: 100% 50%;}}  }$row: 1;
$column: 1;
@for $i from 1 through ($rows * $columns) {// update row@if ($row * $columns) < $i {$row: $row + 1;}// update column$column: $i - ( ($row - 1) * $columns );.trigger-#{$i}:hover {& ~ .lines .line-#{$row} {$scale: ($column - 3) / 10;.left {transform: scaleX($scale);  }$scale: ($columns - ($column + 2 ) ) / 10;.right {transform: scaleX($scale);}}& ~ .lines .line-#{$row - 1},& ~ .lines .line-#{$row + 1}{$scale: ($column - 2) / 10;.left {transform: scaleX($scale); }$scale: ($columns - ($column + 1 ) ) / 10;.right {transform: scaleX($scale);}}& ~ .lines .line-#{$row - 2},& ~ .lines .line-#{$row + 2}{$scale: ($column - 1) / 10;.left {transform: scaleX($scale); }$scale: ($columns - $column ) / 10;.right {transform: scaleX($scale);}}}}

大概是把整个div划分成多个小div, 用hover监听然后移动，明天看吧

【100DAYSCSS#90】追踪鼠标相关推荐

QT mouseMoveEvent事件（qmainwindow内追踪鼠标事件事件）
最近用Qt软件界面,需要用到mouseMoveEvent,研究了下,发现些问题,分享一下. 在Qt中要捕捉鼠标移动事件需要重写MouseMoveEvent,但是MouseMoveEvent为了不太耗资 ...
【JS】网页点击悬浮小苹果+小虫子追踪鼠标位置（可替换）
只是一个很简单的JS+CSS特效. 效果说明: 1.在网页任意位置点击会轮流出现不同颜色的苹果
Glut处理鼠标事件：函数glutMouseFunc
检测鼠标单击要想在OpenGL中处理鼠标事件非常的方便,GLUT已经为我们的注册好了函数,只要我们提供一个方法.使用函数glutMouseFunc,就可以帮我们注册我们的函数,这样当发生鼠标事件时就 ...
QT界面操作1：如何跟踪鼠标位置？
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析_python_脚本之家 (jb51.net) 一.可预见事件事件很多,窗口.鼠标.键盘.时间等的些许改变,都足可 ...
【转】Glut处理鼠标事件
http://blog.csdn.net/wuyong2k/article/details/7839973 目录(?)[-] 检测鼠标单击检测动作检测鼠标进入或离开窗口应用检测鼠标单击要想在 ...
QT之鼠标点击事件学习
最近在学习点击鼠标事件,在这分享给大家 window.h中的配置 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow& ...
OpenGL---GLUT教程（九） GLUT鼠标
GLUT 教程鼠标在前几节,我们看了怎么使用GLUT的keyboard函数,来增加一个OpenGL程序的交互性.现在,是时候研究下鼠标了.GLUT的 ...
VS+QT鼠标事件的一些补充
一:基础知识 1. 鼠标事件分为四种对应不同的函数(该四个函数均继承于QWidget): (1) 按下Press -> void mouseDoubleClickEvent ( QMouseEv ...
六边形酷炫科技跟随鼠标动态特效网站源码可做网页背景
介绍: 基于canvas画布绘制多个六边形追踪鼠标,科技感的几何图形酷炫动画特效,单页hrml源码,可做网站动态背景网盘下载地址: https://zijiewangpan.com/5Sr9m8uV ...

【100DAYSCSS#90】追踪鼠标

【100DAYSCSS#90】追踪鼠标相关推荐

最新文章

热门文章