Question

任何人都有对象动画的建议，可以在悬停或点击时显示文字？寻找这样的东西：

尝试将这些水晶制成对象以实现互动。的 Sample mockup website here.

Answer 1

使用div围绕您的动画，然后绑定到jquery mouseover和mouseout事件以添加和删除包含所需文本的css类。像这样：

HTML：

<div class="crystalDiv">
  <!-- This contains an image of a crystal. You can have as many as you want -->
</div>

CSS：

.crystalHover:after{
    content:"Whatever text";
    position: absolute;
    /* Use top, bottom, left, right to position - it will relative to the crystal div*/
}

的javascript：

$('.crystalDiv').on('mouseover',function(e) {
    $(this).addClass('crystalHover');
});
$('.crystalDiv').on('mouseout',function(e) {
    $(this).removeClass('crystalHover');
});
// You can do the same thing with click event if you want

如何为响应式网站创建交互式（可点击）动画？

1 个答案: