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

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框架，它允许定义自定义超文本标记语言标记(Components)，即<hover-sprite>。

至于将鼠标悬停在目录项上时看到的效果...他们为每个项目创建了一个image sprite (来自Remix3D的example sprite)。精灵是旋转的对象的连续快照。基于光标位置，子画面被移动以显示旋转序列中的下一个快照。

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