<hover-sprite> 什么是HTML中的标签以及如何有效地使用？

Question

我一直很欣赏在这里找到的混音3d网站图像：https://www.remix3d.com/board/3vkCqsxjqeH

当您将鼠标悬停在图像目录上时，照片会移动。

我想复制这个，但遇到了麻烦。检查元素会发现其中一张互动卡使用了我从未见过的标签。这是该卡的div：

<div role="listitem" aria-setsize="32" aria-posinset="1" aria-label="Grid Item 1: " class="gallery-grid-item visible">
<creation-item id="ember551" class="ember-view">
<div data-test-selector="creation-item" draggable="true" class="item-content  ">
<creation-router id="ember556" class="ember-view" aria-hidden="true">
<route-to id="ember561" role="none" class="ember-view"><a tabindex="-1" title="Create an ocean scene" href="/details/0ce93dec1a8e43f6b262faff8b34015f" id="ember566" class="ember-view" aria-label="Model Create an ocean scene - Activate to go to Create an ocean scene's page.">
<!---->
<div class="item-image" data-ember-action="" data-ember-action-575="575">
<div class="item-image-inner">
<hover-sprite id="ember580" class="is-loaded ember-view">
<div style="-webkit-transform: translateY(-6.666666666666667%); -ms-transform: translateY(-6.666666666666667%); transform: translateY(-6.666666666666667%); width: 100%; height: 1500%; background-image: url(https://encoding.assets.remix3d.com:443/003/0ce93dec1a8e43f6b262faff8b34015f/005/08586725131056667658993017976cu01/de7fa282fa004472a8ae94e0460051ea?format=jpg);" class="hover-sprite-sheet"></div>
<!---->
</hover-sprite>
</div>
</div>
</a>
</route-to>
</creation-router>
<div class="item-card-bottom">
<creation-router id="ember581" class="ember-view">
<route-to id="ember582" role="none" class="ember-view"><a title="Create an ocean scene" href="/details/0ce93dec1a8e43f6b262faff8b34015f" id="ember587" class="ember-view" aria-label="Model Create an ocean scene - Activate to go to Create an ocean scene's page.">
<div data-test-selector="creation-item-name" class="item-name" data-ember-action="" data-ember-action-588="588">
<div class="item-name-text">Create an ocean scene</div>
<span class="remix-icon icon-chevron-right-med"></span>
</div>
</a>
</route-to>
</creation-router>
<a data-test-selector="creation-item-add-button" title="Add to board" tabindex="0" href="#" id="ember593" class="item-add-button remix-icon icon-add ember-view"></a>
</div>
</div>
</creation-item>
</div>

我该如何复制这个/悬停精灵是如何使用的？

Answer 1

该网站看起来正在使用Ember.js框架，该框架允许定义自定义HTML标记(组件(，即<hover-sprite>。

至于鼠标悬停在目录项上时所看到的效果。。。对于每个项目，他们都创建了一个图像精灵(例如来自Remix 3D的精灵(。精灵是旋转中对象的顺序快照。根据光标位置，精灵会移动以显示旋转序列中的下一个快照。

您不需要使用Ember.js来创建这种效果。下面是一个使用jQuery演示解决方案的示例：Rotate sprite javascript。