特殊日子给博客食用的预制菜

(这个页面是站长自用的。毕竟他记性不好嘛。)

(本页面会持续更新来添加一些博客美化代码,标有*的是我和chatGPT写的。)

节日弹窗*

差不多这个效果,附带烟花

由于每次打开网站都会显示这玩意而过于繁琐,我用 JavaScript 和 localStorage 来实现弹窗仅在每个浏览器只显示一次。

不需要烟花的可以把注释=🎇 弹窗逻辑=下面的for循环改成for (let i = 0; i < 0; i++) {

为了防止网站主题文件的样式预设干扰,这里把所有样式后面都加了!important权重,并且把所有变量名都起的特别长(防止重复变量名干扰)

for循环那儿可以调整烟花的个数(i < 8那儿)和每个烟花间隔的延迟;const particleCount_2025 = 45;可以调整每个烟花微粒的个数(别太多了,容易死机的);

colorList_2025这个列表是烟花微粒的随机颜色

<!--弹窗-->
<style>
    /* 弹窗 */
    .popup_modal_2025_newyear {
        display: none;
        position: fixed;
        z-index: 99999;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: white !important;
        padding: 20px !important;
        border-radius: 10px !important;
        text-align: center !important;
        width: 320px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    }

    .popup_modal_2025_newyear h2 {
        margin: 0 !important;
        font-size: 22px !important;
    }

    .popup_modal_2025_newyear p {
        margin: 15px 0 !important;
    }

    .popup_modal_2025_newyear button {
        margin-top: 10px !important;
        padding: 8px 20px !important;
        border: none !important;
        background-color: #007BFF !important;
        color: white !important;
        border-radius: 5px !important;
        cursor: pointer !important;
    }

    /* 烟花粒子 */
    .firework_particle_2025 {
        position: absolute !important;
        width: 6px !important;
        height: 6px !important;
        opacity: 1 !important;
        border-radius: 2px !important; 
    }
    
    .cillo_2025_text_h2 {
        color: #A52A2A !important;
    }
    
    .cillo_2025_text_p {
        color: #8B4500 !important;
    }
    
    
</style>


<!-- 弹窗 -->
<div id="modal_container_2025_happy_newyear" class="popup_modal_2025_newyear">
    <h2 class="cillo_2025_text_h2">🎉 2025 新年快乐 🎉</h2>
    <p class="cillo_2025_text_p">愿新的一年,所有的美好都如期而至,所有的期待都不负等待。</p>
    <button onclick="closePopup_2025_newyear()">确定</button>
</div>

<script>
    // === 🎆 烟花特效 ===
    function createFireworkEffect_2025(x, y) {
        const colorList_2025 = ["#FFFF00", "#7CFC00", "#33FF57", "#339FFF", "#E633FF"];
        const particleCount_2025 = 45; //每个烟花的微粒数量

        for (let i = 0; i < particleCount_2025; i++) {
            let particleElement_2025 = document.createElement("div");
            particleElement_2025.classList.add("firework_particle_2025");
            particleElement_2025.style.backgroundColor = colorList_2025[Math.floor(Math.random() * colorList_2025.length)];
            particleElement_2025.style.left = `${x}px`;
            particleElement_2025.style.top = `${y}px`;

            document.body.appendChild(particleElement_2025);

            let angle_2025 = (Math.PI * 2 * i) / particleCount_2025;
            let velocity_2025 = Math.random() * 4 + 2;
            let gravity_2025 = 0.15;
            let xVelocity_2025 = Math.cos(angle_2025) * velocity_2025;
            let yVelocity_2025 = Math.sin(angle_2025) * velocity_2025;
            let fadeOut_2025 = 1;

            let animation_2025 = setInterval(() => {
                xVelocity_2025 *= 0.98;
                yVelocity_2025 += gravity_2025;
                let newX_2025 = parseFloat(particleElement_2025.style.left) + xVelocity_2025;
                let newY_2025 = parseFloat(particleElement_2025.style.top) + yVelocity_2025;

                particleElement_2025.style.left = `${newX_2025}px`;
                particleElement_2025.style.top = `${newY_2025}px`;
                fadeOut_2025 -= 0.02;
                particleElement_2025.style.opacity = fadeOut_2025;

                if (fadeOut_2025 <= 0) {
                    clearInterval(animation_2025);
                    particleElement_2025.remove();
                }
            }, 20);
        }
    }

    //随机位置
    function randomPosition_2025() {
        return [Math.random() * window.innerWidth * 0.9, Math.random() * window.innerHeight * 0.6];
    }
    // === 🎇 弹窗逻辑 ===
    function showPopup_2025_newyear() {
        if (!localStorage.getItem("popup_2025_newyear_shown")) {
            document.getElementById("modal_container_2025_happy_newyear").style.display = "block";
    
            for (let i = 0; i < 8; i++) {
                setTimeout(() => {
                    let [x, y] = randomPosition_2025();
                    createFireworkEffect_2025(x, y);
                }, i * 650); // 每次间隔 650ms
            }
        }
    }



    function closePopup_2025_newyear() {
        document.getElementById("modal_container_2025_happy_newyear").style.display = "none";
        localStorage.setItem("popup_2025_newyear_shown", "true");
    }

    showPopup_2025_newyear();

</script>

过年灯笼*

详情见这篇文章:给博客挂上赛博灯笼吧 – 阿草Mimosa的小屋

(注:这东西用window.onload加载,小心别与其他代码冲突)

悼念色

为了表示悼念,使整个网站变为黑白色调的。在额外CSS的最底部添加下列代码即可:

/*网站黑白色(悼念)*/
html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}