侧边栏壁纸
博主头像
zzzgd博主等级

一忘皆空!

  • 累计撰写 18 篇文章
  • 累计创建 11 个标签
  • 累计收到 15 条评论

让博客有动态的菜单图标

zzzgd
2021-07-08 / 0 评论 / 0 点赞 / 272 阅读 / 1,120 字
温馨提示:
本文最后更新于 2021-07-08,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

使用的组件

使用方法

这里只说简单的使用, 其他的效果自己研究吧

  1. 引入css.
    找到专门放css的文件, 实在找不到, 可以全局搜下jquery放在哪个文件中. 也可以先看看自己的博客是否默认自带了这些css
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
        <#--增加动态图标支持-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation/dist/font-awesome-animation.min.css">
  1. 在菜单的标签中加class
    不知道菜单是哪个文件的话, 也可以全局搜下navigation.
    父级标签的class加faa-parentanimated-hover. 这两个是动态图标的, 具体看 https://l-lin.github.io/font-awesome-animation/ 的解释, faa-parent表示这个标签下的子标签有效, animated就是一直在动, animated-hover就是鼠标放上去会动, 还可以用faa-fastfaa-slow来控制快慢.
    然后就是子标签中, 单独用个标签和菜单文字区分开, 否则会菜单文字一起跟着摇动. 标签也是在class上加, fa fa-address-card 则是图标样式的, 可以 http://www.fontawesome.com.cn/faicons/ 在这里选个自己喜欢的.faa-shake则又是动态图标的, 表示怎么动, 又不同的晃动方式, 更多的也可以看 https://l-lin.github.io/font-awesome-animation/ 下面

demo:

<li class="item ">
                            <a class="link md:text-base sm:text-sm " href="/links" target="_self">
                                <span class="faa-parent animated-hover">
                                    <i class="fa fa-address-card  faa-shake" aria-hidden="true"></i>
                                    个人链接
                                </span>
                            </a>
                        </li>

image.png

0

评论区