如何使用Javascript移动CSS对象？

我正在尝试制作一个JavaScript游戏，我需要一个带有动画的CSS对象来代替我最初使用JavaScript制作的对象。基本上，我希望发生的是，当我的“剑”CSS对象取消锐化时，它会随着我的播放器对象一起移动。我一直在寻找一段时间，他们只给我一个结果，因为它将是当网页加载。我需要这把剑总是和玩家一起移动。如果需要我的代码，请告诉我，我会提供它。如果您有任何问题，请随时提问。我是一个新手，所以请轻松使用可能提供的糟糕JavaScript

请使用与我的代码相关的示例
如果你不知道，我可能不明白发生了什么

---

提前感谢您

重点关注示例中的以下元素，我仅在这里介绍CSS

....
    <div class="player"></div>
    <div id="swordl"></div>
    <div id="swordr"></div>
....

注意“玩家”中的

class

更改为

id

现在，无论何时设置

#player

位置的动画，这两把

#剑将保持其相对于其包含父元素左上角的位置：您不必显式设置
#剑的位置的动画

希望有帮助




您可以使用
传输
。我列举了几个例子。一个例子是JavaScript，另一个不仅仅是JavaScript


//通过'movingdiv'的Id获取元素
var div=document.getElementById（'movingdiv'）；
//创建超时（不是必需的）
setTimeout（函数（）{
//将style.top更改为50%，也可以在px中执行此操作
div.style.top='50%'；
//将style.top更改为50%，也可以在px中执行此操作
div.style.left='50%'；
//添加变换，使其可以在视口中居中
div.style.transform='translate（-50%，-50%）；
//在下面添加以毫秒为单位的超时。
}，1000）
#移动div{
宽度：100px；
高度：100px；
背景：黑色；
位置：绝对位置；
顶部：10px；
左：10px；
过渡：所有2；
}
你能给出一个你的代码和CSS的例子吗？主要部分已经用我的代码更新了。我建议你通过验证器运行你的javascript代码：你能想出一个吗？这很有帮助。问题是，我的播放器不是CSS对象，而是JavaScript对象。那么我如何将CSS版本链接到JavaScript版本呢？此外，所有东西，如眼睛和头部位置，都链接到播放器JavaScript模型。因此，在这种情况下，删除和重做不是选项。我也有很多代码链接到它。与我的代码一起使用时，该代码无法正常工作。“即使做了一点修补工作，@Doodle123也许我误解了你的问题。我假设播放器是以HTML的形式呈现到页面上的——在这种情况下，如果你用JS控制它的位置、方向和移动，CSS
position
规则是正确的。因此，如果我要制作一个CSS对象，它的名称与我的JavaScript对象相同，而不放置x、y、宽度和高度之类的东西，它只会链接到我的JavaScript对象？@Doodle。CSS选择器及其规则独立于JavaScript定义HTML元素属性。HTML元素可以用JavaScript识别和操作（更改维度、颜色、位置、删除/交换类等）。CSS和JS可以引用相同的HTML元素，但我们使用CSS进行样式设置（内联或在样式表中），使用JavaScript进行操作和控制。我的回答告诉你，你可以用CSS定义“玩家”和“剑”，这样你只需要设置“玩家”HTML元素的动画，“剑”就会随之移动。
....
    <div id="player">
        <div id="swordl"></div>
        <div id="swordr"></div>
    </div>
....

/* CSS */
#player {
    position: relative;
}

#swordl, #swordr {
    position: absolute;
}

#swordl {
    left: 4px;
    top: 2px;
}

#swordr {
    left: 12px;
    top: 2px;
}