请扮演一个程序员写一个带有一个浮在最高层级的可拖动的带有圆角的带有动画的div的网页
<!DOCTYPE html>
<html>
<head>
<title>Floating Div with Rounded Corners and Animation</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/iB2R 著作权归作者所有。请勿转载和采集!