如何用Css制作一个可以移动的物体

话不多说先放个效果

在网页设计中，很多时候我们需要让一些元素能够在页面中自由移动，以达到更好的视觉效果和用户体验。在这种情况下，我们可以使用 CSS 来实现这个功能。

第一步：div标签

一切都将存在于一个 div 标签中。这是 html 的基本元素，我们可以将内容放入其中。所以我们需要给它一个背景颜色和一个默认大小。

<div class="test"></div>

<style>
.test{
    width:80px;
    height:80px;
    background:blue;
}
</style>

第 2 步：可调整大小

接下来我们要做的是使 div 可调整大小。这会在元素的右下角添加一个小手柄，可以拖动它来调整它的大小。添加两个属性：“overflow: auto”和“resize: both” 不了解的朋友可以看下 developer.mozilla.org/zh-CN/docs/…

<style>
.test{
    width:80px;
    height:80px;
    background:blue;
    overflow:auto;
    resize:both;
}
</style>

如果您希望 div 仅垂直或水平增长，您可以使用“resize: vertical”或“resize: horizontal”

第 3 步：背景图片

一个蓝色的背景显然太难看且不符合我们需求，我们加个背景图像，我们将使用“background-image: url('...')”将一个kunkun添加为图像。

<style>
.test{
    width:80px;
    height:80px;
    background-image: url('<https://cdn.jsdelivr.net/gh/czkm/img-folder@master/move-object/ikun_x340xu_.png>');
    background-position: 100% 100%;
    background-repeat: no-repeat;
    overflow:auto;
    resize:both;
}

</style>

你就获得了一个可以拖动的kunkun但是还有一些可以做的改进。

第 4 步：还可以改进的部分

默认的浏览器拖动部分非常小而且很难抓住，而且不容易发现

我们可以在右下角添加一个小图标。为此，我们可以将其添加为第二个背景层。

.test{
    width:80px;
    height:80px;
    background-image: url('<https://staging.cohostcdn.org/attachment/07d006ca-906f-4499-a89a-4528009f39e3/mover.png>'), 
    url('<https://cdn.jsdelivr.net/gh/czkm/img-folder@master/move-object/ikun_x340xu_.png>');
    background-position: 100% 100%;
    background-repeat: no-repeat;
    overflow:auto;
    resize:both;
}

</style>

还有一个问题 div 可以无限放大。如果您将它用作子元素并且想限制它的大小，可以使用最大宽度和最大高度。

.test{
    max-width:50%;
    max-height:200px;
}

学会了这个还可以做一些花里胡哨的操作

向下👇拖动这个绳子看看吧