<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: #81ff9d;
position: absolute;
z-index: 2;
left: 0;
right: 0;
margin: 0 auto;
margin-top: 150px;
}
.box2 {
width: 200px;
height: 200px;
background-color: #bfaeff;
position: absolute;
z-index: 1;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
margin-top: 100px;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<body οnmοusemοve="mousemove(event)" οnmοuseenter="enter(event)">
<div class="box1">
1
</div>
<div class="box2">
2
</div>
</body>
</html>
<script>
var box1 = document.getElementsByClassName("box1")[0]
var box2 = document.getElementsByClassName("box2")[0]
var ScaleX, ScaleY
var startx, starty
function enter(e) {
startx = e.clientX
starty = e.clientY
}
function mousemove(e) {
ScaleX = e.clientX - startx
ScaleY = e.clientY - starty
box1.style.left = ScaleX/100 +"px"
box1.style.top = ScaleY/100 + "px"
box2.style.left = ScaleX/30 +"px"
box2.style.top = ScaleY/30 + "px"
}
</script>
CSS3简单实现伪3D,分层级图片跟随鼠标移动而移动
猜你喜欢
转载自blog.csdn.net/TCF_JingFeng/article/details/102575984
今日推荐
周排行