如何为响应式网站创建交互式(可点击)动画

How to create an interactive (clickable) animation for responsive website?

本文关键字：动画 交互式 创建 响应 网站      更新时间：2023-09-26

谁有建议的对象动画，可以在悬停或点击显示文本?在

上查找类似的内容

试着把这些晶体做成可以互动的物体。示例模型网站在这里

用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
相关文章：