我们可以在一些资源站点看到导航菜单的位置会有一些hot或new的小标签提醒,既能提醒访客那里是最近更新的栏目,又可以对导航栏起到一定的美化作用。
- 参考站点:详情
具体步骤
在主题根目录下的style.css底部添加以下代码:
.n_hot {
display: block;
animation: hot 1s infinite linear;
-moz-animation: hot 1s infinite linear;
-webkit-animation: hot 1s infinite linear;
-o-animation: hot 1s infinite linear;
width: 25px;
height: 14px;
background: url(http://wp.nuue.cn/wp-content/uploads/2020/07/2.png) no-repeat center;
position: absolute;
top: -8px;
left: 50%;
margin-left: -12.5px;
}
- background:背景图片
- top:顶部距离
- left:左边距离
代码中的链接更换为自己站点图片的链接即可,各位可自行更换背景图片达到不同的效果。
代码调用
示例页面<i class="n_hot"></i>
参考图片