• 注册
  • 发布
  • APP下载安卓
  • 注册
  • wordpress主题 wordpress主题 关注:6 内容:4

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

  • 查看作者
  • 打赏作者
  • 本文语音阅读 播音源:Aiqi

    当前位置: 飞优网 > 小程序及开发 > wordpress主题 > 正文
    • wordpress主题
    • 大版主
      MarTech·神人
      2
      大富豪

      关于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>

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

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

      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导航栏添加小动态图标,真的很简单,不清楚的可以在本贴中回复,飞小优将尽快回复你!

    • 生成海报
    • 请登录之后再进行评论

      登录
      海报

      热门作者

    • 环新网
      环新网
      谷歌大叔
    • Martecher
      Martecher
      审查员
    • 大道至简
      大道至简
      简·方达
    • 唐唐
      唐唐
      美食达人
    • 十分文化
      十分文化
      十分文化
    • 小小言
      小小言
      小小生
    • Garin
      Garin
      cool girl
    • 谷歌大叔
      谷歌大叔
      外贸达人
      • 总打赏排行
      • 今日收益排行
    • 翰林大学士
      翰林大学士
      翰林大学士
    • 文韬武略
      文韬武略
      上飞优 认识更多营销同行者
    • 小助手
      小助手
      有任何问题可以骚扰小助手哟!
    • 诸子百家
      诸子百家
      我就是青年才俊呀!
    • 运营者
      运营者
      上飞优 认识更多营销同行者
    • 朱子理学
      朱子理学
      上飞优 认识更多营销同行者
    • 测试一下下
      测试一下下
      上飞优 认识更多营销同行者
    • 耳东人圭
      耳东人圭
      耳东人圭
    • IoT物联网
      IoT物联网
      IoT物联 连接未来
    • 孫惠民CCG
      孫惠民CCG
      上飞优 认识更多营销同行者
    • 小助手
      小助手
      有任何问题可以骚扰小助手哟!
    • 策略人藏锋
      策略人藏锋
      策略人藏锋
    • 赞赏我们

      • 打赏我们
      • 加入微信群
      • 加入QQ群
      社群时间有限请加微信:tye10w
    • 做任务
    • 签到中心
      小黑屋
      举报中心
    • 关闭窗口
      下载海报