动画图标：两类HTML元素

我开始在此adress上构建博客。对于HTMl和CSS，我已经接近n00b，但是我学到了:-(动画图标：两类HTML元素

我有一个图标组合两个类的问题，图标是font-awsome的一部分，重定向到另一个页面。想，如果可能的话，让它之前动画打开新的一页。

我用animated.css动画吧。只是在我的HTML中添加两个类什么都不做，因为它直接在另一个选项卡中打开新的页面（。）

下面是HTML代码的一部分：

<p class="social"> {% for title, link in SOCIAL %} <a href="{{ link }}" target="_blank"> <i class="fa fa-{{ title }} fa-2x"></i> </a> {% endfor %} </p>

下面是CSS的一部分：

.social { display: inline-block; margin-top: 0px; } .social a { text-decoration: none; margin-left: 15px; text-shadow: 0 1px 3px rgba(0,0,0,0.3); color: #fff; } .links a { font-size: 15px; padding-left: 15px; font-family: sans-serif; letter-spacing: 2px; text-shadow: 0 1px 3px rgba(0,0,0,0.3); text-decoration: none; color: #fff; }

我不知道如何：

看到动画重定向到社会页

在哪里放置类动画图标之前。类声明将是，例如：class="animated infinite bounce"。

谢谢你的帮助。

来源

2016-01-24 gabx

问题寻求帮助的代码必须包括必要的重现它最短的代码后仍然存在**：增加了2 **。尽管您已经提供了一个示例链接，但如果链接无效，那么您的问题对于其他未来具有相同问题的SO用户将没有任何价值。 –

我可以问你重新思考。

不要与他们需要得到他们正在寻找的信息之前，观看动画惹恼你的用户，...除非你卖的动画图标:)

使用:hover和:active创建效果并留下其余的。

更新：在这个问题本身次版本被点击

.link { 
 
    width: 80px; 
 
    height: 30px; 
 
    background: silver; 
 
    border-radius: 5px; 
 
    padding: 5px; 
 
    text-align: center; 
 
    line-height:30px; 
 
} 
 

 
.link:hover { 
 
    background: lime; 
 
    /* 
 
     put your animation properties here... 
 
    */ 
 
} 
 
.link:active { 
 
    background: red; 
 
    /* 
 
     ...or here... 
 
    */ 
 
} 
 

 
.linker { 
 
    display: none; 
 
} 
 
.linker:checked + a { 
 
    background: yellow; 
 
    /* 
 
     ...or here. 
 
    */ 
 
}

<a class="link">Click me!</a> 
 

 
<label> 
 
    <input type="checkbox" class="linker"/> 
 
    <a class="link">Click me 2!</a> 
 
</label>

来源

2016-01-24 13:10:46 LGSon

我将在离开页面时重新考虑并避免动画。不值得。 TY代码我会尽快测试。 – gabx

如果你不知道一些setTimeout链接有一个简单的解决方案。

http://jsfiddle.net/TGPtG/77/

$('#element').on('click', function (e) { 
    e.preventDefault(); 
    setTimeout(function() { 
     $('#element').addClass('fadeOut'); 
     setTimeout(function() { 
      $('#element').removeClass('fadeOut'); 
      $('#element').addClass('fadeIn'); 
      setTimeout(function() { 
       alert('Here you can make redirect!'); 
      }, 1000); // time for fadeIn animation 
     }, 1500); // time for fadeOut animation 
    }, 0); // start fadeOut 
});

来源

2016-01-24 12:43:29 lemoid

动画图标：两类HTML元素

回答

相关问题