在网站设计中，导航栏作为用户访问的核心入口，其视觉吸引力直接影响用户体验。本文将介绍如何在 WordPress 子比主题中添加一个有趣的动态小人装饰，为网站增添生动感和趣味性。

效果图

动态效果可看本站右上角

效果说明：

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

实现步骤：

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

CSS代码

        @media screen and (min-width: 850px) {
            .yigejiner_hang {
                width: 150px;
                height: 200px;
                display: inline-block;
                background: url(这里填写图片素材的地址) no-repeat 50%/100%;
                vertical-align: middle;
                position: fixed;
                left: 90%;
                top: 55px;
                z-index: 50;
                cursor: pointer;
                animation: new-year 1.2s ease-in-out 0s infinite alternate;
                margin-left: -1px;
                transform-origin: 50% 0;
                pointer-events: none;
            }
        }
        @keyframes new-year {
            0% {
                transform: rotate(10deg);
            }
            100% {
                transform: rotate(-10deg);
            }
        }

注意事项

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

代码解析：

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

图片素材

图片素材点我下载