Question

我通常是一名试图成为fullstack的后端开发人员，我遇到了一个小问题。

我想要做的是点击一个按钮滑动到另一侧并更改背景。我熟悉如何通过点击制作事件并实际更改背景。我的问题是如何使CSS看起来很好。

让我们说我有黑白主题。我想要一个白色和黑色边框。当我点击它时，我希望其中一个侧面移动。

以下是我希望它的外观。

想法是点击框和黑色部分移动。基本上白色部分是背景，黑色部分是用一些动画滑动的按钮。然后黑色部分将其颜色切换为与当前背景相反的颜色。

基本上颜色只是交换，但有很酷的滑动动画。

我知道我需要一个div作为当前背景的背景框。

我也知道我需要另一个div作为与当前背景相反的背景移动的实际部分。内部dif将在其内部有一个按钮，点击它将调用更改的函数背景

到目前为止我能做的是

<div class="box">
    <div class="slider">
        <button onClick="changeBackGroundColor()"></button>
    </div>
</div>

slider div的宽度为box的一半，全高度为box。

现在是棘手的部分 - 如何在css中添加if以便我可以随时检查当前背景是什么，并使slider的背景与当前背景相反？

另外 - 如何让它滑到盒子的边框？我需要在两个方向上进行滑动。主题为白色时从右到左，从黑色到左边写入。