可多用[分享]WordPress主题中秋灯笼特效代码

要在WordPress主题中添加中秋灯笼特效，您可以使用CSS和JavaScript来实现。以下是一个简单的示例代码，可以在WordPress主题中使用：首先，在主题的CSS文件中添加以下CSS代码，...

要在WordPress主题中添加中秋灯笼特效，您可以使用CSS和JavaScript来实现。以下是一个简单的示例代码，可以在WordPress主题中使用：

首先，在主题的CSS文件中添加以下CSS代码，用于定义灯笼的样式：

.lantern {
    position: absolute;
    width: 50px;
    height: 100px;
    background: red;
    border-radius: 50%;
    animation: lanternMove 5s infinite alternate;
}

@keyframes lanternMove {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50px);
    }
}

接下来，在主题的footer.php文件中添加以下JavaScript代码，用于动态生成和移动灯笼：

jQuery(document).ready(function($) {
    function createLantern() {
        var lantern = $('<div class="lantern"></div>');
        var posX = Math.random() * ($(window).width() - 50);
        lantern.css({
            left: posX,
            top: '-100px'
        });
        $('body').append(lantern);
        lantern.animate({
            top: $(window).height() + 100
        }, 5000, 'linear', function() {
            $(this).remove();
        });
    }

    setInterval(function() {
        createLantern();
    }, 2000);
});

接下来，在主题的footer.php文件中添加以下JavaScript代码，用于动态生成和移动灯笼

jQuery(document).ready(function($) {
    function createLantern() {
        var lantern = $('<div class="lantern"></div>');
        var posX = Math.random() * ($(window).width() - 50);
        lantern.css({
            left: posX,
            top: '-100px'
        });
        $('body').append(lantern);
        lantern.animate({
            top: $(window).height() + 100
        }, 5000, 'linear', function() {
            $(this).remove();
        });
    }

    setInterval(function() {
        createLantern();
    }, 2000);
});

保存您的更改并刷新您的WordPress网站，您将看到灯笼在页面上飘动的效果。

请注意，以上代码仅为示例，您可以根据自己的需求和设计进行调整和修改。

确保在编辑主题文件之前备份您的文件，以防发生意外情况。

希望这可以帮助您在WordPress主题中实现中秋灯笼特效！