(这个页面是站长自用的。毕竟他记性不好嘛。)
(本页面会持续更新来添加一些博客美化代码,标有*的是我和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);
}