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