<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画示例</title>
<style>
.popup {
width: 100vw;
height: 100vh;
background-color: lightblue;
position: absolute;
left: 50%;
top: 70px;
transform: translate(-50%, 0%);
z-index: 0;
transition: all 0.7s cubic-bezier(1, 0.7, 0.5, 1);
}
.min {
width: 50px;
height: 50px;
font-size: 1px;
z-index: 2;
}
.min #moveButton {
width: 10px;
height: 2px;
font-size: 1px;
}
.logo {
position: absolute;
top: 10px;
right: 10px;
width: 50px;
height: 50px;
background-color: rgb(0, 106, 253);
z-index: 1;
}
.flexBox {
padding-bottom: 60px;
display: flex;
flex-direction: column;
position: relative;
}
</style>
</head>
<body>
<div class="flexBox">
<div class="logo">头像</div>
<div>
<div id="popup" class="popup">
<button id="moveButton">点击移动并缩小弹框</button>
<span>弹框内容</span>
</div>
</div>
</div>
<script>
document.getElementById('moveButton').addEventListener('click', function() {
var logo = document.querySelector('.logo');
var logoBox = logo.getBoundingClientRect()
var popup = document.getElementById('popup');
popup.className = 'popup min';
popup.style.left = `${logoBox.x + 17}px`;
popup.style.top = `${logoBox.y - 8}px`;
});
</script>
</body>
</html>