新春对联js代码

新年将至，看到很多大佬的博客里挂了灯笼。

尝试照着灯笼代码的思路改成了春联代码。

js代码里七字对联的内容是小红书里找的，可以在代码自定义修改，改成自己喜欢的对联内容。

代码可以使用到博客，各类网页里。

js代码

(function() {  
    "use strict";  
    
    // 创建样式  
    const style = document.createElement('style');  
    style.type = 'text/css';  
    style.textContent = `  
        @charset "UTF-8";  
        .duilian__wrapper {  
            position: fixed;  
            top: 50%;  
			transform: translateY(-50%);
            left: 10px;  
            right: 10px;  
            z-index: 999;  
            display: flex;  
            justify-content: space-between;
			pointer-events: none;  // 添加点击穿透
        }  
        .duilian__box {  
            position: relative;  
            display: inline-block;  
            width: 3rem;  
            background: rgba(216, 0, 15, .8);  
            border-radius: 12px;  
            box-shadow: -5px 5px 50px 4px #fa6c00;  
			pointer-events: none;  // 添加点击穿透
        }  
        .duilian__text {  
            font-family: '隶书', sans-serif;  
            font-size: 2rem;  
            color: #dc8f03;  
            line-height: 70px;  
            text-align: center;  
        }  
    `;  
    document.head.appendChild(style);  

    // 创建内容  
    const wrapper = document.createElement('div');  
    wrapper.className = 'duilian__wrapper';  

    const leftBox = document.createElement('div');  
    leftBox.className = 'duilian__box';  
    leftBox.innerHTML = '<div class="duilian__text">梧桐树上凤呈祥</div>';  

    const rightBox = document.createElement('div');  
    rightBox.className = 'duilian__box';  
    rightBox.innerHTML = '<div class="duilian__text">世纪门前蛇起舞</div>';  

    // 将左右春联添加到容器中  
    wrapper.appendChild(leftBox);  
    wrapper.appendChild(rightBox);  

    // 将整个内容添加到 body 中  
    document.body.appendChild(wrapper);  
})();

效果图

1.应用到简单网页

2.js代码应用到butterfly主题教程

如果害怕弄乱，提前做好博客的备份。

找到上图路径，在js文件夹里添加duilian文件夹。

在duilian文件夹里添加duilian.js文件。

代码内容在文章开头。

打开butterfly主题文件夹下的_config.yml文件，把下面这段代码加到inject设置的buttom里面。

#对联
    - <script src="/js/duilian/duilian.js"></script>

最后 hexo s 预览效果。

完成撒花！！！