html - 使用 CSS 变换将多个对象放在一起

Question

我正在尝试使用 CSS 动画将两个对象(一根电缆和一个电缆盖)放在屏幕中央(最终显示盖在电缆上)。

动画应该是这样的:电缆将从响应式(100% 宽度)div 的右侧淡入并滑入，封面将从左侧淡入并滑入；覆盖层将被分配一个更高的 z-index，以便它位于电缆末端的顶部，给人一种覆盖电缆的外观。

理想情况下，动画应该由按钮点击触发，因为桌面和移动设备上的体验需要相同。这两个对象必须在 div 的中心(无论其当前宽度如何)聚集在一起(并稍微重叠)。动画完成后不需要自行反转。

有人知道如何实现这一目标吗？我，对于我的生活，无法理解如何实现这一目标。我很感激这里的任何帮助!

Answer 1

基本思路是从将一个元素放置在屏幕左侧开始:right: 100%

和屏幕右侧的另一个元素:left: 100%

当用户触发更改时，通过将左/右设置为 50%，将两个元素置于屏幕中央。

例如，这是一个基本的(和特定于 webkit 的)版本:

html:

<button id="doit">show me</button>
<div class="cover">cover</div>
<div class="cable">cable</div>

CSS:

.cover, .cable {
    position: absolute;
    top: 100px;
    width: 100px;
    height: 25px;
    color: white;
    -webkit-transition: all .5s ease;
}

.cover {
    right: 100%;
    background-color: green;
}

.cable {
    left: 100%;
    background-color: red;
}

JavaScript:

var doit = document.querySelector('#doit');

doit.addEventListener('click', function() {
    var cover = document.querySelector('.cover');
    var cable = document.querySelector('.cable');

    cable.style.left = "50%";
    cover.style.right = "50%";
});

jsfiddle demo