• 注册
  • APP下载安卓
  • 注册
  • wordpress主题 wordpress主题 关注:1523 内容:11

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

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

    当前位置: 飞优网 > 小程序及开发 > wordpress主题 > 正文
    • 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>

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

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

      请登录之后再进行评论

      登录
      和我们一起在QQ上讨论Hot
      官方人员的回复时间
      小于5分钟
      >

      热门作者

    • 环新网
      环新网
      谷歌大叔
    • Martecher
      Martecher
      审查员
    • 大道至简
      大道至简
      简·方达
    • 唐唐
      唐唐
      美食达人
    • 十分文化
      十分文化
      十分文化
    • 小小言
      小小言
      小小生
    • Garin
      Garin
      cool girl
    • 谷歌大叔
      谷歌大叔
      外贸达人
      • 总打赏排行
      • 今日收益排行
    • 小助手
      小助手
      欲买桂花同载酒,荒泷天下第一斗。
    • 翰林大学士
      翰林大学士
      要是追不上光,那就变成光吧。
    • 诸子百家
      诸子百家
      恋爱本质不是走向婚姻,而是探究最真实的自己。
    • 文韬武略
      文韬武略
      若教眼底无离恨,不信人间有白头
    • 运营者
      运营者
      实变函数学十遍,泛函学完心泛寒。
    • MA
      MA
      上飞优 认识更多营销同行者
    • 诸葛大V
      诸葛大V
      上飞优 认识更多营销同行者
    • 测试一下下
      测试一下下
      上飞优 认识更多营销同行者
    • 耳东人圭
      耳东人圭
      耳东人圭
    • IoT物联网
      IoT物联网
      IoT物联 连接未来
    • 文韬武略
      文韬武略
      若教眼底无离恨,不信人间有白头
    • 翰林大学士
      翰林大学士
      要是追不上光,那就变成光吧。
    • 或許你喜歡消愁
      或許你喜歡消愁
      来人间一趟 你要看看太阳。
    • ℳ人潮太过拥挤ღ
      ℳ人潮太过拥挤ღ
      相思相见知何日?此时此夜难为情!
    • 宁的老公
      宁的老公
      知识有两种,一种是你知道的,一种是你知道在哪里能找到的!
    • 波妞191107
      波妞191107
      若待上林花似锦,出门俱是看花人。
    • Timo127
      Timo127
      强而不欺,威而不霸,这才是一个伟大国家和民族的气度与底蕴。
    • 可乐只喝百事
      可乐只喝百事
      重要的感情总是非常单纯、自然脱口而出的。
    • 月凡商贸-
      月凡商贸-
      我爱的人也爱着我,对我来说这简直是个奇迹。
    • ㅤㅤㅤ
      ㅤㅤㅤ
      I'm nothing without you.
    • 赞赏我们

      • 打赏我们
      • 加入微信群
      • 加入QQ群
      社群时间有限请加微信:tye10w
    • 赚金币
    • 发布
    • VIP权益
    • 帖子间隔 侧栏位置: