创建带有圆角动画和可拖动功能的浮动 Div
<!DOCTYPE html>
<html>
<head>
<title>创建带有圆角动画和可拖动功能的浮动 Div</title>
<style>
.floating-div {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
cursor: move;
animation: floatAnimation 3s infinite;
}
<pre><code> @keyframes floatAnimation {
0% {
transform: translate(-50%, -50%);
}
50% {
transform: translate(-50%, -45%);
}
100% {
transform: translate(-50%, -50%);
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const div = document.querySelector('.floating-div');
let isDragging = false;
let offset = [0, 0];
div.addEventListener('mousedown', (e) => {
isDragging = true;
offset = [
div.offsetLeft - e.clientX,
div.offsetTop - e.clientY
];
});
document.addEventListener('mouseup', (e) => {
isDragging = false;
});
document.addEventListener('mousemove', (e) => {
e.preventDefault();
if (isDragging) {
div.style.left = (e.clientX + offset[0]) + 'px';
div.style.top = (e.clientY + offset[1]) + 'px';
}
});
});
</script>
</code></pre>
</head>
<body>
<div class='floating-div'></div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/qiKN 著作权归作者所有。请勿转载和采集!