效果图

动态效果可看本站右上角

效果说明：

这个动态小人会在导航栏右侧轻轻摆动，如同在向访问者打招呼。形成自然而有趣的动画效果。

实现步骤：

• 准备工作： 首先需要准备一个小人的图片素材。（本站已备好两张素材喜欢就可以下载使用）
• 以wp 子比主题 为例，添加下方代码到子比主题后台– 全局功能 – 自定义代码 >> 自定义头部HTML 即可！没有的添加到头部文件 header.php 文件中即可！

注意事项

上述代码通常可以放在导航栏代码之后，注意备份原文件以防出错。

代码解析：

• CSS 样式定义：通过 @media 查询确保只在大屏幕显示，设置小人的位置、大小和动画效果。
• HTML 元素：创建一个 div 元素作为小人容器，应用定义好的样式。
• 这个装饰元素不会干扰用户的正常操作，因为设置了 pointer-events:none ，点击时不会触发任何事件。
• 通过这种简单的方式，你可以为网站增添个性化元素，提升用户对网站的好感度和记忆点。这种小装饰尤其适合节日主题或创意网站使用。

图片素材