灯笼 插件 - xBlog
🏮🏮 显示文字可根据节日自行修改。
1️⃣CSS代码
粘贴到公用css文件末尾即可
/* ====================
顶部灯笼样式
==================== */
@keyframes swing {
0%, 100% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
}
.blog-lantern {
position: fixed;
top: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
transform-origin: top center;
animation: swing 3s infinite ease-in-out;
pointer-events: none;
}
.lantern-left { left: 68px; }
.lantern-right { right: 68px; }
.lantern-line {
width: 3px;
height: 40px;
background: #dc8f03;
}
.lantern-body {
position: relative;
width: 150px;
height: 110px;
background: #f00;
border-radius: 75px;
box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 15px 60px -8px #f00;
transform-origin: top center;
animation: swing 3s infinite ease-in-out;
}
/* 灯笼上下盖子合并样式 */
.lantern-body::before,
.lantern-body::after {
content: '';
position: absolute;
left: 50%;
width: 60px;
height: 10px;
background: #dc8f03;
transform: translateX(-50%);
}
.lantern-body::before {
top: -10px;
border-radius: 3px 3px 0 0;
}
.lantern-body::after {
bottom: -10px;
border-radius: 0 0 3px 3px;
}
/* 灯笼装饰合并样式 */
.lantern-circle,
.lantern-rect {
position: absolute;
top: -3px;
left: 50%;
border: 1.5px solid #dc8f03;
border-radius: 50%;
transform: translateX(-50%);
}
.lantern-circle {
width: 120px;
height: 115px;
}
.lantern-rect {
width: 45px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
/* 灯笼文本样式 */
.lantern-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80px;
font-family: "KaiTi", "STKaiti", serif;
color: #ffd700;
line-height: 0.8;
}
/* 文字基础样式 */
.lantern-text span {
display: block;
text-align: center;
font-weight: bold;
transition: all 0.3s ease;
}
/* 为灯笼文字添加不同的类名 */
.lantern-left .lantern-text span:nth-child(1), /* 万 */
.lantern-left .lantern-text span:nth-child(4), /* 意 */
.lantern-right .lantern-text span:nth-child(1), /* 春 */
.lantern-right .lantern-text span:nth-child(4) /* 乐 */
{
font-size: 20px;
margin: 2px 0;
color: #ffd700;
}
.lantern-left .lantern-text span:nth-child(2), /* 事 */
.lantern-left .lantern-text span:nth-child(3), /* 如 */
.lantern-right .lantern-text span:nth-child(2), /* 节 */
.lantern-right .lantern-text span:nth-child(3) /* 快 */
{
font-size: 24px;
margin: 4px 0;
color: #ffed4e;
text-shadow: 0 0 5px rgba(255, 215, 0, 0.6);
}
.lantern-tassel {
position: absolute;
bottom: -46%;
left: 50%;
width: 3px;
height: 45px;
background: #dc8f03;
animation: swing 3s infinite ease-in-out;
transform: translateX(-50%);
}
/* 灯笼穗子装饰合并样式 */
.lantern-tassel::before,
.lantern-tassel::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.lantern-tassel::before {
bottom: 0;
width: 18px;
height: 18px;
background: #dc8f03;
border-radius: 50%;
}
.lantern-tassel::after {
bottom: -100%;
width: 12px;
height: 60px;
background: #ffa500;
border-radius: 0 0 3px 6px;
transform: translate(-50%, 15%);
}
/* 暂停动画合并选择器 */
.paused .blog-lantern,
.paused .lantern-body,
.paused .lantern-tassel {
animation-play-state: paused;
}
@media (max-width: 768px) {
.blog-lantern { display: none; }
}
2️⃣HTML代码
粘贴到页面<body>内
<!-- 左边灯笼 -->
<div class="blog-lantern lantern-left">
<div class="lantern-line"></div>
<div class="lantern-body">
<div class="lantern-circle">
<div class="lantern-rect">
<div class="lantern-text">
<span>万</span><span>事</span><span>如</span><span>意</span>
</div>
</div>
</div>
<div class="lantern-tassel"></div>
</div>
</div>
<!-- 右边灯笼 -->
<div class="blog-lantern lantern-right">
<div class="lantern-line"></div>
<div class="lantern-body">
<div class="lantern-circle">
<div class="lantern-rect">
<div class="lantern-text">
<span>春</span><span>节</span><span>快</span><span>乐</span>
</div>
</div>
</div>
<div class="lantern-tassel"></div>
</div>
</div>