Html 使用CSS转换将多个对象组合在一起

我尝试使用CSS动画将两个对象（一条电缆和一个电缆盖）放在屏幕中央（最终显示电缆上的盖）

动画应该是这样的：电缆将淡入并从响应（100%宽度）div的右侧滑入，封盖将淡入并从左侧滑入；将为保护层指定更高的z指数，使其位于电缆端的顶部，从而使其看起来覆盖了电缆

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

---

有人对如何实现这一目标有任何线索吗？一、 就我的一生而言，我无法想象这是如何实现的。我感谢这里的任何帮助

基本思路是从屏幕左侧放置一个元素开始：

right:100%

屏幕右侧的另一个元素：

left:100%

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

例如，下面是一个基本（和webkit特定）版本：

html:

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%";
});

---

就动画而言，我认为CSS3过渡效果最好，因为它们速度更快、更容易操作，但缺点是一次只能使用一个动画。一个好的jQuery库来管理这些是。如果您需要更多功能（并且可能牺牲一些速度），请查看

jQuery按钮点击非常容易：

$('#btnid').click(function() {
    // Stuff happens here
});

有关这方面的更多信息，请访问

最后，对于CSS。我想这将是最困难的部分。您可以使用

背景图像
（）设置电缆图像。我建议您将两个元素都设置为
位置：绝对
，然后将顶部的元素设置为
z-index:99999
（不要仅使用1）。最后，如果对齐方面存在一些问题，您可以随意使用
顶部
、
左侧
和
边距
CSS属性。您可能必须将两个图像都放在父div中

希望这有帮助
 您刚才解释了如何实现这一点。我不明白问题是什么。如果你希望有人为你编写代码，那么我认为这不是这个网站的功能。我理解这种情绪，@Zak，但我甚至不知道从哪里开始编写代码（除了响应容器和两个对象的div）。我当然不希望有人为我编写代码，但即使是一些提示或链接到一篇解释/演示了这一点的文章，也会非常有帮助。我已经搜索了几个小时，没有找到任何对我想要完成的事情有意义的东西。好吧，我只是想理解你的要求。我会给你发一些有用的资料。这正是我需要看到的，@dc5！非常感谢你的小提琴演奏。要获得恰到好处的效果需要一点欺骗，但是您的示例代码对我实现我想要的效果起到了巨大的帮助！是像你这样的人在StackOverflow使它成为一个很棒的地方D
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%";
});

$('#btnid').click(function() {
    // Stuff happens here
});