【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监听然后移动，明天看吧😒