定义一个div,里面包含多个子div
vcsode快捷代码:div.shell>div.item*49,复制可能没效果,自己动手写一下
<div class="shell">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
css样式
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #eed9eba9;
}
.shell {
display: grid;
grid-template-columns: repeat(7, 40px);
grid-template-rows: repeat(7, 40px);
grid-gap: 1.5rem;
}
.item {
background-color: rgb(40, 40, 40);
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border-left: solid 10px #fff;
}
.item::after,
.item::before {
content: "";
width: 5px;
height: 5px;
display: block;
position: absolute;
border-radius: 50%;
left: 20px;
background-color: #fff;
}
.item::after {
top: 25px;
}
.item::before {
bottom: 25px;
}
js代码
- clientX和clientY与x,y一样的,以浏览器显示区域的左上角开始,指鼠标的坐标。x,y是新浏览器支持
- offsetX,offsetY,针对目标元素的左上角坐标,从padding开始。
- layerX,layerY,往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角
- pageX,pageY相对页面左上角的距离 screenX screenY 相对屏幕左上角的位置
document.addEventListener("mousemove", (e) => {
const item = document.querySelectorAll(".item");
//获取鼠标位置
const mouseX = e.clientX;
const mouseY = e.clientY;
item.forEach((sqr) => {
//获取item的位置
const sqrX = sqr.offsetLeft;
const sqrY = sqr.offsetTop;
const diffX = mouseX - sqrX;
const diffY = mouseY - sqrY;
const radians = Math.atan2(diffY, diffX);
const angle = (radians * 180) / Math.PI;
sqr.style.transform = `rotate(${angle}deg)`;
});
});