新年页面定制CSS

效果：

新年页面定制CSS：

@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap'); /* 新年祝福横幅 */ #cnblogs_post_body::before, .day::before { content: "⌨️ 码上发财🖱️"; display: block; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #ff0000, #ff6b6b); color: gold; padding: 0.8rem 2rem; border-radius: 50px; font-family: 'Ma Shan Zheng', cursive; font-size: 1.2rem; font-weight: bold; z-index: 9999; box-shadow: 0 4px 20px rgba(255, 0, 0, 0.5); animation: banner-glow 2s ease-in-out infinite; border: 2px solid gold; pointer-events: none; } @keyframes banner-glow { 0%, 100% { box-shadow: 0 4px 20px rgba(255, 0, 0, 0.5); } 50% { box-shadow: 0 4px 30px rgba(255, 215, 0, 0.8); } } /* 左侧对联 */ body::before { content: "烦恼一骑绝尘去"; white-space: pre; position: fixed; left: 3%; top: 50%; transform: translateY(-50%); background: linear-gradient(180deg, #ff0000, #cc0000); color: gold; padding: 2rem 0.8rem; border-radius: 8px; font-family: 'Ma Shan Zheng', cursive; font-size: 1.5rem; font-weight: bold; line-height: 2.5rem; text-align: center; writing-mode: vertical-rl; letter-spacing: 0.3rem; z-index: 9997; border: 3px solid gold; box-shadow: 0 4px 20px rgba(255, 0, 0, 0.6); pointer-events: none; } /* 右侧对联 */ #sideBar::before { content: "钞票万马奔腾来"; white-space: pre; position: fixed; right: 3%; top: 50%; transform: translateY(-50%); background: linear-gradient(180deg, #ff0000, #cc0000); color: gold; padding: 2rem 0.8rem; border-radius: 8px; font-family: 'Ma Shan Zheng', cursive; font-size: 1.5rem; font-weight: bold; line-height: 2.5rem; text-align: center; writing-mode: vertical-rl; letter-spacing: 0.3rem; z-index: 9997; border: 3px solid gold; box-shadow: 0 4px 20px rgba(255, 0, 0, 0.6); pointer-events: none; } /* 灯笼装饰 - 左上 */ #header::before { content: "🏮"; position: fixed; top: 90px; left: 8%; font-size: 2.5rem; animation: lantern-swing 3s ease-in-out infinite; filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.5)); z-index: 9997; pointer-events: none; } /* 灯笼装饰 - 右上 */ #header::after { content: "🏮"; position: fixed; top: 90px; right: 8%; font-size: 2.5rem; animation: lantern-swing 3s ease-in-out infinite 0.5s; filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.5)); z-index: 9997; pointer-events: none; } @keyframes lantern-swing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } } /* 红包装饰 - 左中 */ .postTitle::before { content: "🧧"; position: fixed; top: 180px; left: 15%; font-size: 2rem; animation: hongbao-swing 4s ease-in-out infinite 0.3s; filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)); z-index: 9996; pointer-events: none; } /* 红包装饰 - 右中 */ .postTitle::after { content: "🧧"; position: fixed; top: 180px; right: 15%; font-size: 2rem; animation: hongbao-swing 4s ease-in-out infinite 0.8s; filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)); z-index: 9996; pointer-events: none; } @keyframes hongbao-swing { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-20px) rotate(5deg); } } /* 金色粒子效果 - 左上角 */ #navList::before { content: ""; position: fixed; width: 8px; height: 8px; background: gold; border-radius: 50%; top: 130px; left: 20%; animation: gold-twinkle 2s ease-in-out infinite; box-shadow: 0 0 10px gold; z-index: 9995; pointer-events: none; } /* 金色粒子效果 - 右上角 */ #navList::after { content: ""; position: fixed; width: 8px; height: 8px; background: gold; border-radius: 50%; top: 130px; right: 20%; animation: gold-twinkle 2s ease-in-out infinite 0.5s; box-shadow: 0 0 10px gold; z-index: 9995; pointer-events: none; } @keyframes gold-twinkle { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* 烟花粒子容器 - 使用博客园现有元素 */ #blogTitle::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9990; background-image: radial-gradient(circle, #ff0000 2px, transparent 2px), radial-gradient(circle, #ffd700 2px, transparent 2px), radial-gradient(circle, #ff6b6b 2px, transparent 2px), radial-gradient(circle, #ffa500 2px, transparent 2px); background-size: 200px 200px, 300px 300px, 250px 250px, 350px 350px; background-position: 0 0, 50px 50px, 100px 100px, 150px 150px; animation: firework-fall 15s linear infinite; opacity: 0.6; } @keyframes firework-fall { 0% { background-position: 0 -100px, 50px -50px, 100px -150px, 150px -200px; } 100% { background-position: 0 100vh, 50px calc(100vh + 50px), 100px calc(100vh + 100px), 150px calc(100vh + 150px); } } /* 页面顶部留出空间给新年横幅 */ #home { margin-top: 80px !important; } /* 让装饰不影响文字选择 */ body::before, #cnblogs_post_body::before, .day::before, #header::before, #header::after, #blogTitle::after, #sideBar::before, .postTitle::before, .postTitle::after, #navList::before, #navList::after { user-select: none; -webkit-user-select: none; -moz-user-select: none; } /* 响应式设计 - 手机端优化 */ @media (max-width: 768px) { #cnblogs_post_body::before, .day::before { font-size: 0.9rem; padding: 0.5rem 1rem; } #header::before, #header::after { font-size: 1.8rem; top: 70px; } .postTitle::before, .postTitle::after { font-size: 1.5rem; } #blogTitle::before, #sideBar::before { font-size: 1.2rem; padding: 1.5rem 0.6rem; } }