结合标志的两个半图像[关闭]答案

【问题标题】：combine two half images of logo [closed]结合标志的两个半图像[关闭]
【发布时间】：2022-01-22 20:19:05
【问题描述】：

我想创建一个带有动画的网页，其中我有一个 3D 模型徽标（它有 2 个部分，一个是右侧，第二个是左侧部分。）并且它们之间有一个文本，当该 3D 模型在鼠标悬停时分裂。在拆分该 3D 模型之前，该模型会显示为一个图像，例如一个完整的徽标。谁能帮助我？谢谢

【问题讨论】：

请通过删除除核心代码之外的所有内容来简化您的回答:) 另外，您想要一半吗？左/右 op 上/下？
另外，如果可以的话，您可以使用“javascript sn-p”工具根据您现有的内容创建一个示例
我想将徽标的左侧与徽标的右侧结合起来。我的标志是 3D 模型。
我有一个 figma 文件广告视频来解释我想要什么......我不想知道如何在这个平台上分享它......你能在这方面帮助我吗？
请不要创建多个帐户，一次又一次地写同一个问题而没有改进stackoverflow.com/questions/70433195/combine-2-split-images

标签： javascript jquery css

【解决方案1】：

.logoHalf {
  width: 300px;
  height: 200px;
  background-size: 200%; /* twice the width to only show half */
  background-position: center;
  display: inline-block;
}

#left {
  background-image: url('https://image.shutterstock.com/image-vector/example-red-square-grunge-stamp-600w-327662909.jpg');
  background-position: left center; /* this one from the left */
}

#right {
  background-image: url('https://previews.123rf.com/images/vasilyrosca/vasilyrosca1912/vasilyrosca191200495/137253397-beispiel-f%C3%BCr-ein-vektorstempelsymbol-beispiel-wasserzeichen-stempel-.jpg');
  background-position: right center; /* this one from the right */
}

<div id="left" class="logoHalf"></div>
<div id="right" class="logoHalf"></div>

【讨论】：

这里是链接 (drive.google.com/drive/folders/…) 请查看。视频是嵌入的，并且可以更好地解释。
对不起，我不会打开互联网上陌生人的文件。没有什么私人的，只是好的做法:)