效果图

效果说明

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

实现步骤

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

• <!-- 顶部添加悬挂样式 -->
  <div class="yigejiner_hang"></div>

  CSS代码

  路径：Zibll主题设置 -> 全局&功能 -> 自定义代码 -> 自定义CSS 样式里添加以下代码

•   此处内容已隐藏，请评论后刷新页面查看.

  代码解析

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

  结语

  看吧！😜 就这么简单就部署好了！大家快去试试吧！