我开始在这 adress 建立博客.说到 HTMl 和 CSS,我几乎是个新手,但我学会了 :-(
我在为一个图标组合两个类时遇到了问题。该图标是 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"
。
谢谢你的帮助。
最佳答案
我可以请你重新考虑一下吗。
在获得他们正在寻找的信息之前,不要用他们需要看的动画来烦扰您的用户,...除非您正在销售动画图标:)
使用 :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>
关于html - 动画图标 : two classes HTML element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34975529/