wordpress导航栏添加小动态图标教程，真的很简单

关于wordpress导航栏添加小动态图标教程，今天飞小优给大家详细介绍，先看下具体视频demo效果:

看完后是不是很nice啊？

那如何实现这种动态效果呢？说白了也就是一段CSS的事情。接下来就具体实操一下：

DEMO有2种状态：一种是通过文字实现动效果，另一种是通过gif图。分别介绍如何通过以上2种方式实现wordpress导航栏添加小动态图标过程。

1、通过文字实现

将以下代码添加到style.css文件或自定义css中，代码如下：

.jian {  position: absolute;  top: 30px;  right: 12px;  transform-origin: 100% 0%;  transform: translate(100%, -100%);  display: block;  padding: 2px;  max-width: 35px;  font-size: 10px;  color: #FF512D;  text-align: center;  line-height: 1;  border-radius: 8px 8px 8px 0;  border: 1px solid #FF512D;  background-color: white;  animation: bubbleAnimate 0.6s infinite;  margin: 27px 0px 0px 0;}@keyframes bubbleAnimate {  0% {    top: 0;  }  50% {    top: -5px;  }  100% {    top: 0;  }}

然后在回到后台》菜单，添加代码：

<span class="jian">荐</span>

添加后再查看前台你就会看到具体效果了。注意：里面的间距和尺寸自己修改参数值调成自己适合的就好。

2.通过图片实现方式

将hot.gif上传到根目录或者OSS即可

然后添加以下代码到style.css或者自定义css中，如下：

.re {
  display: inline-block;
  width: 11px;
  height: 11px;
  background: url(/wp-content/uploads/2021/05/hot.gif) no-repeat left top;
  margin-left: 4px;
}

同理，在菜单中导航标签添加代码，如下：

<i class="re"></i>

以上2种方式均可以实现wordpress导航栏添加小动态图标，真的很简单，不清楚的可以在本贴中回复，飞小优将尽快回复你！