WordPress美化 – 导航菜单hot/new小图片

我们可以在一些资源站点看到导航菜单的位置会有一些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>

参考图片