0,侧边栏活动推荐带倒计时小美化
子比侧边栏活动推荐+倒计时小美化，图片+高度自定义，倒计时自定义，多卡片单独倒计时，倒计时结束自动禁链接！其他功能自行美化！
效果如上图所示箭头 ↑
小工具-自定义HTML-任意侧边栏
1,侧边栏仿路牌美化
<style>
.guizhou-board {
width: 100% !important;
max-width: 100% !important;
margin: 10px 0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
font-family: "Microsoft Yahei", sans-serif;
background-color: #fff;
box-sizing: border-box;
}
.board-top {
background-color: #0052d9;
color: #fff;
text-align: center;
font-size: 18px;
font-weight: bold;
line-height: 1.2;
box-sizing: border-box;
/* 核心：固定高度+垂直居中，文字不换行 */
height: 60px !important;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px;
}
.board-bottom {
display: flex;
align-items: center;
background-color: #f8f9fa;
padding: 10px 5px;
justify-content: space-between;
box-sizing: border-box;
}
.dir-btn {
display: flex;
align-items: center;
background: transparent;
border: none;
cursor: pointer;
font-size: 14px;
color: #666;
padding: 5px 8px;
border-radius: 4px;
transition: color 0.2s;
line-height: 1;
flex-shrink: 0;
}
.dir-btn:hover {
color: #0052d9;
}
.dir-icon {
font-size: 12px;
margin: 0 !important;
}
.west-btn .dir-icon {
margin-right: 5px !important;
}
.east-btn .dir-icon {
margin-left: 5px !important;
}
.station-text {
text-align: center;
font-size: 14px;
flex: 1;
margin: 0 10px;
}
.station-text a {
color: #666;
text-decoration: none;
transition: color 0.2s;
display: inline-block;
}
.station-text a:hover {
color: #0052d9;
text-decoration: underline;
}
</style>
<div class="guizhou-board">
<div class="board-top" id="boardText">我在这里很想你</div>
<div class="board-bottom">
<button class="dir-btn west-btn" onclick="changeText('west')">
<i class="fa dir-icon fa-chevron-left"></i> 西
</button>
<div class="station-text">
<a href="https://www.mymxy.cn" target="_blank" rel="noopener noreferrer">一个网站！</a>
</div>
<button class="dir-btn east-btn" onclick="changeText('east')">
东 <i class="fa dir-icon fa-chevron-right"></i>
</button>
</div>
</div>
<script>
const textMap = {
west: [
'想你的风又吹到了这里',
'给我充个VIP',
'我建网站养你',
'等我！好不得！'
],
east: [
'给你台免费服务器',
'源码都在这里',
'这是一个好地方',
'我在这里你在哪里'
]
};
let westIndex = 0, eastIndex = 0;
function changeText(direction) {
const boardText = document.getElementById('boardText');
if (direction === 'west') {
boardText.textContent = textMap.west[westIndex];
westIndex = (westIndex + 1) % textMap.west.length;
} else {
boardText.textContent = textMap.east[eastIndex];
}
}
</script>2 侧边动态时钟样式美化
渐变-黑色
<style>
.dynamic-clock {
background: linear-gradient(135deg, #6e8efb, #a777e3);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
margin: 20px auto;
max-width: 500px;
color: white;
font-family: 'Microsoft YaHei', sans-serif;
position: relative;
overflow: hidden;
}
.dynamic-clock::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
animation: rotate 20s linear infinite;
z-index: 0;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.clock-container { position: relative; z-index: 1; }
.year-display {
text-align: center;
font-size: 1.3em;
margin-bottom: 5px;
font-weight: 600;
display: flex;
justify-content: center;
gap: 15px;
}
.time-section { text-align: center; margin-bottom: 15px; }
.time-display {
font-size: 3.5em;
font-weight: 300;
letter-spacing: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.time-display span { margin: 0 5px; }
.colon {
animation: pulse 1s infinite;
position: relative;
top: -5px;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.date-section {
display: flex;
justify-content: space-between;
margin: 15px 0;
font-size: 1.1em;
background: rgba(255, 255, 255, 0.15);
padding: 12px;
border-radius: 10px;
backdrop-filter: blur(5px);
}
.date-item { text-align: center; flex: 1; }
.date-label {
font-size: 0.8em;
opacity: 0.8;
margin-bottom: 5px;
}
.date-value { font-weight: 600; }
.greeting-section {
text-align: center;
margin: 20px 0 10px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.greeting-text {
font-size: 1.5em;
font-weight: 500;
margin-bottom: 8px;
}
.greeting-tip {
font-size: 0.95em;
opacity: 0.9;
line-height: 1.5;
margin-bottom: 15px;
}
.next-festival {
background: rgba(0, 0, 0, 0.1);
padding: 10px;
border-radius: 8px;
font-size: 0.95em;
margin-top: 10px;
}
.festival-message { font-weight: 600; }
body.dark-theme .dynamic-clock {
background: linear-gradient(135deg, #434343, #000000);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
</style>
<div class="dynamic-clock">
<div class="clock-container">
<div class="year-display">
<span>2025年</span>
<span>乙巳年</span>
<span>蛇年</span>
</div>
<div class="time-section">
<div class="time-display">
<span id="hours">13</span>
<span class="colon">:</span>
<span id="minutes">36</span>
<span class="colon">:</span>
<span id="seconds">00</span>
</div>
</div>
<div class="date-section">
<div class="date-item">
<div class="date-label">公历日期</div>
<div class="date-value" id="solar-date">9月26日</div>
</div>
<div class="date-item">
<div class="date-label">农历日期</div>
<div class="date-value" id="lunar-date">八月初五</div>
</div>
<div class="date-item">
<div class="date-label">星期</div>
<div class="date-value" id="weekday">星期五</div>
</div>
</div>
<div class="greeting-section">
<div class="greeting-text" id="greeting">下午好</div>
<div class="greeting-tip" id="tip">金秋时节，愿您收获满满</div>
<div class="next-festival" id="next-festival">
<div class="festival-message">距离国庆节还有5天</div>
</div>
</div>
</div>
</div>
<script>
// 2025年重要节日（国家授时中心数据）
const festivals = [
{ name: "国庆节", date: new Date(2025, 9, 1), message: "🇨🇳 国庆快乐！盛世华诞，普天同庆" },
{ name: "中秋节", date: new Date(2025, 9, 6), message: "🎑 中秋快乐！月圆人团圆" },
{ name: "元旦", date: new Date(2026, 0, 1), message: "🎉 元旦快乐！新年新气象" },
{ name: "春节", date: new Date(2026, 1, 17), message: "🧧 春节快乐！乙巳年大吉" }
];
function updateTime() {
const now = new Date();
const hours = now.getHours();
// 更新时间显示
document.getElementById('hours').textContent = hours.toString().padStart(2,'0');
document.getElementById('minutes').textContent = now.getMinutes().toString().padStart(2,'0');
document.getElementById('seconds').textContent = now.getSeconds().toString().padStart(2,'0');
// 更新日期显示
document.getElementById('solar-date').textContent = `${now.getMonth()+1} 月${now.getDate()} 日`;
document.getElementById('weekday').textContent = ['日','一','二','三','四','五','六'][now.getDay()];
// 更新问候语
updateGreeting(hours);
// 更新节日提醒
updateFestivalReminder(now);
}
function updateGreeting(hours) {
let greeting, tip;
if (hours < 5) {
greeting = "深夜好";
tip = "夜深人静，注意休息";
} else if (hours < 8) {
greeting = "清晨好";
tip = "晨光熹微，一日之计在于晨";
} else if (hours < 11) {
greeting = "上午好";
tip = "精力充沛，工作顺利";
} else if (hours < 13) {
greeting = "中午好";
tip = "午间小憩，补充能量";
} else if (hours < 18) {
greeting = "下午好";
tip = "金秋时节，愿您收获满满";
} else if (hours < 22) {
greeting = "晚上好";
tip = "华灯初上，享受闲暇时光";
} else {
greeting = "夜深了";
tip = "早睡早起，养生之道";
}
document.getElementById('greeting').textContent = greeting;
document.getElementById('tip').textContent = tip;
}
function updateFestivalReminder(now) {
const oneDay = 24 * 60 * 60 * 1000;
let nextFestival = null;
let minDays = Infinity;
// 找出最近的未来节日
festivals.forEach(fest => {
const diffDays = Math.ceil((fest.date - now) / oneDay);
if (diffDays >= 0 && diffDays < minDays) {
minDays = diffDays;
nextFestival = fest;
}
});
// 更新显示
const festivalEl = document.getElementById('next-festival');
if (nextFestival) {
if (minDays === 0) {
festivalEl.innerHTML = `<div class="festival-message">${nextFestival.message}</div>`;
} else {
festivalEl.innerHTML = `<div class="festival-message">距离${nextFestival.name} 还有${minDays}天</div>`;
}
} else {
festivalEl.style.display = 'none';
}
}
// 初始化
document.addEventListener('DOMContentLoaded', () => {
updateTime();
setInterval(updateTime, 1000);
// 暗色模式适配
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark-theme');
}
});
</script>简洁版
<style>
.dynamic-clock {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin: 20px auto;
max-width: 500px;
color: #333;
font-family: 'Microsoft YaHei', sans-serif;
position: relative;
overflow: hidden;
}
.dynamic-clock::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 70%);
animation: rotate 20s linear infinite;
z-index: 0;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.clock-container { position: relative; z-index: 1; }
.year-display {
text-align: center;
font-size: 1.3em;
margin-bottom: 5px;
font-weight: 600;
display: flex;
justify-content: center;
gap: 15px;
}
.time-section { text-align: center; margin-bottom: 15px; }
.time-display {
font-size: 3.5em;
font-weight: 300;
letter-spacing: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.time-display span { margin: 0 5px; }
.colon {
animation: pulse 1s infinite;
position: relative;
top: -5px;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.date-section {
display: flex;
justify-content: space-between;
margin: 15px 0;
font-size: 1.1em;
background: rgba(0, 0, 0, 0.03);
padding: 12px;
border-radius: 10px;
}
.date-item { text-align: center; flex: 1; }
.date-label {
font-size: 0.8em;
opacity: 0.8;
margin-bottom: 5px;
}
.date-value { font-weight: 600; }
.greeting-section {
text-align: center;
margin: 20px 0 10px;
padding-top: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.greeting-text {
font-size: 1.5em;
font-weight: 500;
margin-bottom: 8px;
}
.greeting-tip {
font-size: 0.95em;
opacity: 0.9;
line-height: 1.5;
margin-bottom: 15px;
}
.next-festival {
padding: 10px;
border-radius: 8px;
font-size: 0.95em;
margin-top: 10px;
}
.festival-message { font-weight: 600; }
body.dark-theme .dynamic-clock {
background: linear-gradient(135deg, #434343, #000000);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
color: white;
}
body.dark-theme .date-section {
background: rgba(255, 255, 255, 0.15);
}
body.dark-theme .greeting-section {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
body.dark-theme .next-festival {
background: rgba(0, 0, 0, 0.1);
}
</style>
<div class="dynamic-clock">
<div class="clock-container">
<div class="year-display">
<span>2025年</span>
<span>乙巳年</span>
<span>蛇年</span>
</div>
<div class="time-section">
<div class="time-display">
<span id="hours">13</span>
<span class="colon">:</span>
<span id="minutes">36</span>
<span class="colon">:</span>
<span id="seconds">00</span>
</div>
</div>
<div class="date-section">
<div class="date-item">
<div class="date-label">公历日期</div>
<div class="date-value" id="solar-date">9月26日</div>
</div>
<div class="date-item">
<div class="date-label">农历日期</div>
<div class="date-value" id="lunar-date">八月初五</div>
</div>
<div class="date-item">
<div class="date-label">星期</div>
<div class="date-value" id="weekday">星期五</div>
</div>
</div>
<div class="greeting-section">
<div class="greeting-text" id="greeting">下午好</div>
<div class="greeting-tip" id="tip">金秋时节，愿您收获满满</div>
<div class="next-festival" id="next-festival">
<div class="festival-message">距离国庆节还有5天</div>
</div>
</div>
</div>
</div>
<script>
// 2025年重要节日（国家授时中心数据）
const festivals = [
{ name: "国庆节", date: new Date(2025, 9, 1), message: "🇨🇳 国庆快乐！盛世华诞，普天同庆" },
{ name: "中秋节", date: new Date(2025, 9, 6), message: "🎑 中秋快乐！月圆人团圆" },
{ name: "元旦", date: new Date(2026, 0, 1), message: "🎉 元旦快乐！新年新气象" },
{ name: "春节", date: new Date(2026, 1, 17), message: "🧧 春节快乐！乙巳年大吉" }
];
function updateTime() {
const now = new Date();
const hours = now.getHours();
// 更新时间显示
document.getElementById('hours').textContent = hours.toString().padStart(2,'0');
document.getElementById('minutes').textContent = now.getMinutes().toString().padStart(2,'0');
document.getElementById('seconds').textContent = now.getSeconds().toString().padStart(2,'0');
// 更新日期显示
document.getElementById('solar-date').textContent = `${now.getMonth()+1} 月${now.getDate()} 日`;
document.getElementById('weekday').textContent = ['日','一','二','三','四','五','六'][now.getDay()];
// 更新问候语
updateGreeting(hours);
// 更新节日提醒
updateFestivalReminder(now);
}
function updateGreeting(hours) {
let greeting, tip;
if (hours < 5) {
greeting = "深夜好";
tip = "夜深人静，注意休息";
} else if (hours < 8) {
greeting = "清晨好";
tip = "晨光熹微，一日之计在于晨";
} else if (hours < 11) {
greeting = "上午好";
tip = "精力充沛，工作顺利";
} else if (hours < 13) {
greeting = "中午好";
tip = "午间小憩，补充能量";
} else if (hours < 18) {
greeting = "下午好";
tip = "金秋时节，愿您收获满满";
} else if (hours < 22) {
greeting = "晚上好";
tip = "华灯初上，享受闲暇时光";
} else {
greeting = "夜深了";
tip = "早睡早起，养生之道";
}
document.getElementById('greeting').textContent = greeting;
document.getElementById('tip').textContent = tip;
}
function updateFestivalReminder(now) {
const oneDay = 24 * 60 * 60 * 1000;
let nextFestival = null;
let minDays = Infinity;
// 找出最近的未来节日
festivals.forEach(fest => {
const diffDays = Math.ceil((fest.date - now) / oneDay);
if (diffDays >= 0 && diffDays < minDays) {
minDays = diffDays;
nextFestival = fest;
}
});
// 更新显示
const festivalEl = document.getElementById('next-festival');
if (nextFestival) {
if (minDays === 0) {
festivalEl.innerHTML = `<div class="festival-message">${nextFestival.message}</div>`;
} else {
festivalEl.innerHTML = `<div class="festival-message">距离${nextFestival.name} 还有${minDays}天</div>`;
}
} else {
festivalEl.style.display = 'none';
}
}
// 初始化
document.addEventListener('DOMContentLoaded', () => {
updateTime();
setInterval(updateTime, 1000);
// 暗色模式适配
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark-theme');
}
});
</script>3,四个推荐小区块
定位：小工具-自定义HTML
<style>
.tools-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
max-width: 1200px;
margin: 0 auto;
}
/* 基础4列布局 - 大屏幕显示4个一行 */
.tool-card {
flex: 0 0 calc(25% - 12px);
min-width: 160px;
height: 100px;
box-sizing: border-box;
}
/* 中大屏幕（1024px以下）调整为3列 */
@media (max-width: 1024px) {
.tool-card {
flex: 0 0 calc(33.333% - 11px);
}
}
/* 中屏幕（768px以下）调整为2列 */
@media (max-width: 768px) {
.tool-card {
flex: 0 0 calc(50% - 8px);
}
}
/* 小屏幕（480px以下）调整为1列 */
@media (max-width: 480px) {
.tool-card {
flex: 0 0 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
}
/* 卡片样式保持不变 */
.tool-card {
position: relative;
border-radius: 4px;
overflow: hidden;
cursor: default;
transition: all 0.3s ease;
border: 1px solid #ddd;
background-color: #f8fafc;
}
.tool-card:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-color: #bbb;
}
.tool-bg {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
overflow: hidden;
opacity: 0.15;
transition: opacity 0.3s ease;
}
.tool-card:hover .tool-bg {
opacity: 0.2;
}
.tool-icon {
position: absolute;
top: 10px;
right: -10px;
transform: rotate(15deg);
width: 60px;
height: 60px;
}
.icon-design {
position: relative;
}
.icon-design::before {
content: '';
position: absolute;
width: 45px;
height: 5px;
background-color: #3b82f6;
top: 30px;
left: 5px;
transform: rotate(-45deg);
}
.icon-design::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-left: 5px solid #f97316;
border-bottom: 5px solid #f97316;
top: 18px;
left: 38px;
transform: rotate(135deg);
}
.icon-analysis {
position: relative;
}
.icon-analysis::before,
.icon-analysis::after,
.icon-analysis span {
content: '';
position: absolute;
width: 8px;
background-color: #10b981;
bottom: 5px;
}
.icon-analysis::before {
height: 22px;
left: 15px;
}
.icon-analysis span {
height: 38px;
left: 30px;
}
.icon-analysis::after {
height: 30px;
left: 45px;
}
.icon-edit {
position: relative;
}
.icon-edit::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
border: 5px solid #8b5cf6;
border-radius: 3px;
top: 10px;
left: 10px;
}
.icon-edit::after {
content: '';
position: absolute;
width: 18px;
height: 5px;
background-color: #8b5cf6;
top: 48px;
left: 38px;
transform: rotate(-45deg);
}
.icon-convert {
position: relative;
}
.icon-convert::before,
.icon-convert::after {
content: '';
position: absolute;
height: 5px;
background-color: #ec4899;
}
.icon-convert::before {
width: 30px;
top: 30px;
left: 10px;
}
.icon-convert::after {
width: 15px;
top: 23px;
left: 40px;
transform: rotate(45deg);
}
.icon-convert span {
content: '';
position: absolute;
width: 15px;
height: 5px;
background-color: #ec4899;
top: 37px;
left: 40px;
transform: rotate(-45deg);
}
.tool-content {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 12px;
color: #333;
text-align: center;
}
.tool-title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 10px 0;
transition: all 0.3s ease;
}
.tool-card:hover .tool-title {
color: #1e40af;
}
.tool-button {
padding: 6px 16px;
background-color: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 2px;
color: #334155;
font-size: 0.85rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
display: inline-block;
}
.tool-button:hover {
background-color: #3b82f6;
color: white;
border-color: #2563eb;
}
</style>
<div class="tools-container">
<!-- 设计工具卡片 -->
<div class="tool-card">
<div class="tool-bg">
<div class="tool-icon icon-design"></div>
</div>
<div class="tool-content">
<h3 class="tool-title">设计色彩大全</h3>
<a class="tool-button" href="https://zhongguose.com/" target="_blank">打开色彩库</a>
</div>
</div>
<!-- 分析工具卡片 -->
<div class="tool-card">
<div class="tool-bg">
<div class="tool-icon icon-analysis">
<span></span>
</div>
</div>
<div class="tool-content">
<h3 class="tool-title">免费在线抠图</h3>
<a class="tool-button" href="https://zh.bgsub.com/webapp/" target="_blank">立即抠图</a>
</div>
</div>
<!-- 编辑工具卡片 -->
<div class="tool-card">
<div class="tool-bg">
<div class="tool-icon icon-edit"></div>
</div>
<div class="tool-content">
<h3 class="tool-title">免费商用字体</h3>
<a class="tool-button" href="https://www.maoken.com/" target="_blank">立即下载</a>
</div>
</div>
<!-- 转换工具卡片 -->
<div class="tool-card">
<div class="tool-bg">
<div class="tool-icon icon-convert">
<span></span>
</div>
</div>
<div class="tool-content">
<h3 class="tool-title">在线工具箱</h3>
<a class="tool-button" href="https://www.udtool.com/" target="_blank">查看功能</a>
</div>
</div>
</div>
<script>
function addToolCard(toolName, url, iconType) {
const container = document.querySelector('.tools-container');
const card = document.createElement('div');
card.className = 'tool-card';
// 移除卡片的onclick跳转
let iconHtml = '';
switch(iconType) {
case 'design':
iconHtml = '<div class="tool-icon icon-design"></div>';
break;
case 'analysis':
iconHtml = '<div class="tool-icon icon-analysis"><span></span></div>';
break;
case 'edit':
iconHtml = '<div class="tool-icon icon-edit"></div>';
break;
case 'convert':
iconHtml = '<div class="tool-icon icon-convert"><span></span></div>';
break;
default:
iconHtml = '<div class="tool-icon icon-design"></div>';
}
// 跳转功能移至按钮的href
card.innerHTML = `
<div class="tool-bg">
${iconHtml}
</div>
<div class="tool-content">
<h3 class="tool-title">${toolName}</h3>
<a class="tool-button" href="${url}" target="_blank">打开工具</a>
</div>
`;
container.appendChild(card);
}
</script>4.动态自定义横幅
<div class="widget-graphic-cover mb20 hidden-xs"><div style="--font-size:30px;"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 16%!important;"><video autoplay="" loop="" muted="" class="fit-cover lazyloading" data-src="https://oss.zibll.com/zibll.com/2023/04/蓝色矩形循环跳动.mp4" src="https://oss.zibll.com/zibll.com/2023/04/蓝色矩形循环跳动.mp4" poster="https://oss.zibll.com/zibll.com/2024/03/20240317190819420-蓝色矩阵跳动-封面.jpg"></video><div class="abs-center text-center graphic-text this-font"><div class="em12 mb10 font-bold">模板网</div>
致力于打造一个高质量模板分享平台</div></div></div></div>5, 滚动式公告美化框
可设置文章、[文字广告]、公告
- 内容：原来的5条（+5条副本=共10条）
- 容器高度：
90px（只显示前2条，其他隐藏在下方） - 每条高度：
45px（2条×45px=90px） - 动画：20秒滚动前5条，然后副本接上实现无缝循环
现在视觉上只看到2条，但滚动时会陆续展示第3、4、5条，然后回到第1条。这个是横着自己可以设置宽度， 带日期版本的
主内容区（带日期）：
<div class="mini-scroll-widget">
<style>
.mini-scroll-widget {
background: #fff;
border: 1px solid #ddd;
border-radius: 16px;
padding: 20px;
font-family: "Microsoft YaHei", Arial, sans-serif;
margin-bottom: 20px;
}
.mini-scroll-widget .scroll-title {
font-size: 16px;
color: #333;
border-bottom: 2px solid #2b6cb0;
padding-bottom: 10px;
margin: 0 0 15px 0;
font-weight: 600;
}
.mini-scroll-widget .news-box {
height: 90px; /* 只显示2条的高度 */
overflow: hidden;
background: #f7fafc;
border-radius: 12px;
position: relative;
}
.mini-scroll-widget .news-list {
margin: 0;
padding: 0;
list-style: none;
animation: miniScroll 20s linear infinite; /* 5条内容滚动稍慢 */
will-change: transform;
}
.mini-scroll-widget .news-box:hover .news-list {
animation-play-state: paused;
}
@keyframes miniScroll {
0% {transform: translateY(0);}
100% {transform: translateY(-50%);} /* 滚动一半（前5条） */
}
.mini-scroll-widget .news-item {
display: flex;
align-items: center;
padding: 0 16px;
height: 45px; /* 每条固定45px */
border-bottom: 1px solid #e2e8f0;
font-size: 14px;
color: #555;
text-decoration: none;
transition: all 0.2s;
gap: 8px;
box-sizing: border-box;
}
.mini-scroll-widget .news-item:hover {
background: #ebf8ff;
color: #2b6cb0;
padding-left: 20px;
}
.mini-scroll-widget .news-item:before {
content: "•";
color: #2b6cb0;
font-weight: bold;
margin-right: 2px;
flex-shrink: 0;
}
.mini-scroll-widget .item-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.mini-scroll-widget .date {
flex-shrink: 0;
color: #999;
font-size: 12px;
background: #f1f5f9;
padding: 2px 8px;
border-radius: 10px;
font-family: Arial, sans-serif;
white-space: nowrap;
}
.mini-scroll-widget .news-box.hide-dates .date {
display: none !important;
}
.mini-scroll-widget .news-item.green-glow {
color: #059669;
text-shadow: 0 0 5px rgba(5, 150, 105, 0.3);
}
.mini-scroll-widget .news-item.green-glow:hover {
color: #047857;
text-shadow: 0 0 8px rgba(5, 150, 105, 0.5);
background: #f0fdf4;
}
.mini-scroll-widget .news-item.green-glow:before {
color: #10b981;
}
.mini-scroll-widget .view-more {
margin-top: 15px;
font-size: 13px;
text-align: right;
}
.mini-scroll-widget .view-more a {
color: #666;
text-decoration: none;
transition: all 0.2s;
padding: 4px 8px;
border-radius: 6px;
}
.mini-scroll-widget .view-more a:hover {
color: #2b6cb0;
background: #f1f5f9;
}
</style>
<h4 class="scroll-title">最新公告</h4>
<div class="news-box" id="miniWrap">
<ul class="news-list">
<!-- 第1条 -->
<li><a href="https://jump.923ka.com/#login?code=XcDKMLpm" target="_blank" rel="noopener noreferrer nofollow" class="news-item green-glow"><span class="item-text">科学上网无限流量</span><span class="date">2026年01-28</span></a></li>
<!-- 第2条 -->
<li><a href="https://www.ccyuanma.com/shop/1461.html" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">WordPress AI智能采集更新发布</span><span class="date">2026年01-27</span></a></li>
<!-- 第3条 -->
<li><a href="https://z-pay.cn/?uid=4837" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">【ZPAY】个人支付接口</span><span class="date">2026年01-26</span></a></li>
<!-- 第4条 -->
<li><a href="https://www.aliyun.com/minisite/goods?userCode=sgk87wpp" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">免费领取服务器折扣</span><span class="date">2026年01-25</span></a></li>
<!-- 第5条 -->
<li><a href="https://www.ccyuanma.com/" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">新增支付宝微信支付接口支持</span><span class="date">2026年01-24</span></a></li>
<!-- 无缝副本（必须与前5条完全一致） -->
<li><a href="https://jump.923ka.com/#login?code=XcDKMLpm" target="_blank" rel="noopener noreferrer nofollow" class="news-item green-glow"><span class="item-text">科学上网无限流量</span><span class="date">2026年01-28</span></a></li>
<li><a href="https://www.ccyuanma.com/shop/1461.html" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">WordPress AI智能采集更新发布</span><span class="date">2026年01-27</span></a></li>
<li><a href="https://z-pay.cn/?uid=4837" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">【ZPAY】个人支付接口</span><span class="date">2026年01-26</span></a></li>
<li><a href="https://www.aliyun.com/minisite/goods?userCode=sgk87wpp" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">免费领取服务器折扣</span><span class="date">2026年01-25</span></a></li>
<li><a href="https://www.ccyuanma.com/" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">新增支付宝微信支付接口支持</span><span class="date">2026年01-24</span></a></li>
</ul>
</div>
<div class="view-more"><a href="https://www.ccyuanma.com/" target="_blank">更多</a></div>
<script>
(function() {
var wrap = document.getElementById('miniWrap');
if (!wrap) return;
function checkDates() {
var items = wrap.querySelectorAll('.news-item');
var hasOverflow = false;
items.forEach(function(item) {
var text = item.querySelector('.item-text');
if (text && text.scrollWidth > text.clientWidth + 2) {
hasOverflow = true;
}
});
if (hasOverflow) {
wrap.classList.add('hide-dates');
} else {
wrap.classList.remove('hide-dates');
}
}
checkDates();
var resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(checkDates, 100);
});
})();
</script>
</div>侧边栏（不带日期）：
<div class="wp-news-scroll">
<style>
.wp-news-scroll {
background: #fff;
border: 1px solid #ddd;
border-radius: 16px;
padding: 20px;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
.scroll-title {
font-size: 16px;
color: #333;
border-bottom: 2px solid #2b6cb0;
padding-bottom: 10px;
margin: 0 0 15px 0;
font-weight: 600;
}
.news-wrap {
height: 200px;
overflow: hidden;
background: #f7fafc;
border-radius: 12px;
position: relative;
}
.news-list {
margin: 0;
padding: 0;
list-style: none;
animation: scrollUp 15s linear infinite;
will-change: transform;
}
.news-wrap:hover .news-list {
animation-play-state: paused;
}
@keyframes scrollUp {
0% {transform: translateY(0);}
100% {transform: translateY(-50%);}
}
.news-item {
display: flex;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid #e2e8f0;
font-size: 14px;
color: #555;
text-decoration: none;
transition: all 0.2s;
gap: 8px;
}
.news-item:hover {
background: #ebf8ff;
color: #2b6cb0;
padding-left: 20px;
}
.news-item:before {
content: "•";
color: #2b6cb0;
font-weight: bold;
margin-right: 2px;
flex-shrink: 0;
}
.item-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* 日期样式 */
.date {
flex-shrink: 0;
color: #999;
font-size: 12px;
background: #f1f5f9;
padding: 2px 8px;
border-radius: 10px;
font-family: Arial, sans-serif;
white-space: nowrap;
}
/* 统一隐藏模式：只要有隐藏，全部隐藏 */
.news-wrap.hide-all-dates .date {
display: none !important;
}
/* 绿色发光效果 */
.news-item.green-glow {
color: #059669;
text-shadow: 0 0 5px rgba(5, 150, 105, 0.3);
}
.news-item.green-glow:hover {
color: #047857;
text-shadow: 0 0 8px rgba(5, 150, 105, 0.5);
background: #f0fdf4;
}
.news-item.green-glow:before {
color: #10b981;
}
.view-more {
margin-top: 15px;
font-size: 13px;
text-align: right;
}
.view-more a {
color: #666;
text-decoration: none;
transition: all 0.2s;
padding: 4px 8px;
border-radius: 6px;
}
.view-more a:hover {
color: #2b6cb0;
background: #f1f5f9;
}
</style>
<h4 class="scroll-title">最新公告</h4>
<div class="news-wrap" id="newsWrap">
<ul class="news-list">
<li><a href="https://jump.923ka.com/#login?code=XcDKMLpm" target="_blank" rel="noopener noreferrer nofollow" class="news-item green-glow"><span class="item-text">科学上网无限流量</span><span class="date">2026年01-28</span></a></li>
<li><a href="https://www.ccyuanma.com/shop/1461.html" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">WordPress AI智能采集更新发布</span><span class="date">2026年01-27</span></a></li>
<li><a href="https://z-pay.cn/?uid=4837" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">【ZPAY】个人支付接口</span><span class="date">2026年01-26</span></a></li>
<li><a href="https://www.aliyun.com/minisite/goods?userCode=sgk87wpp" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">免费领取服务器折扣</span><span class="date">2026年01-25</span></a></li>
<li><a href="https://www.ccyuanma.com/" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">新增支付宝微信支付接口支持</span><span class="date">2026年01-24</span></a></li>
<li><a href="https://jump.923ka.com/#login?code=XcDKMLpm" target="_blank" rel="noopener noreferrer nofollow" class="news-item green-glow"><span class="item-text">科学上网无限流量</span><span class="date">2026年01-28</span></a></li>
<li><a href="https://www.ccyuanma.com/shop/1461.html" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">WordPress AI智能采集更新发布</span><span class="date">2026年01-27</span></a></li>
<li><a href="https://z-pay.cn/?uid=4837" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">【ZPAY】个人支付接口</span><span class="date">2026年01-26</span></a></li>
<li><a href="https://www.aliyun.com/minisite/goods?userCode=sgk87wpp" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">免费领取服务器折扣</span><span class="date">2026年01-25</span></a></li>
<li><a href="https://www.ccyuanma.com/" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">新增支付宝微信支付接口支持</span><span class="date">2026年01-24</span></a></li>
</ul>
</div>
<div class="view-more">
<a href="https://www.ccyuanma.com/" target="_blank">更多</a>
</div>
<script>
(function() {
function checkDates() {
var wrap = document.getElementById('newsWrap');
var items = wrap.querySelectorAll('.news-item');
var hasOverflow = false;
// 先检查是否有任何一条文本溢出
items.forEach(function(item) {
var text = item.querySelector('.item-text');
if (text && text.scrollWidth > text.clientWidth + 2) {
hasOverflow = true;
}
});
// 如果有溢出，统一隐藏所有日期；否则都显示
if (hasOverflow) {
wrap.classList.add('hide-all-dates');
} else {
wrap.classList.remove('hide-all-dates');
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', checkDates);
} else {
checkDates();
}
var resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(checkDates, 100);
});
})();
</script>
</div>6,侧边栏单独推荐小版块
站点后台 >>外观 >>小工具 >>自定义html代码
不加图片版：
<a class="ads" href="https://www.mymxy.cn" target="_blank">
<h4>新手站长导航</h4>
<h5>帮新手站长快速起步！</h5>
<span class="ads-btn ads-btn-outline">立即进入</span>
</a>
<style>
/* 卡片：圆角6px + 无任何阴影 */
.ads {
display: block;
padding: 40px 15px;
text-align: center;
color: #fff !important;
background: #ff5719;
background-image: -webkit-linear-gradient(135deg, #bbafe7, #5368d9);
background-image: linear-gradient(135deg, #bbafe7, #5368d9);
border-radius: 6px;
transition: all 0.3s ease;
text-decoration: none;
}
/* 悬浮仅保留上浮，无阴影 */
.ads:hover {
transform: translateY(-3px);
}
.ads h4 {
margin: 0;
font-size: 22px;
font-weight: bold;
}
.ads h5 {
margin: 10px 0 0;
font-size: 14px;
font-weight: bold;
}
.ads .ads-btn {
margin-top: 20px;
font-weight: bold;
}
/* 按钮样式（保持优化后的醒目效果） */
.ads-btn {
display: inline-block;
font-weight: 600;
margin-top: 10px;
text-align: center;
user-select: none;
border: none;
padding: 0 36px;
line-height: 38px;
font-size: 14px;
border-radius: 50px;
outline: 0;
transition: all 0.3s ease-in-out;
}
.ads-btn-outline {
color: #fff;
background-color: #5368d9;
border: none;
}
.ads-btn-outline:hover {
color: #fff;
background-color: #3b4fbb;
}
</style>加图片版：
<a class="ads" href="https://www.mymxy.cn" target="_blank">
<h4>新手站长导航</h4>
<h5>帮新手站长快速起步！</h5>
<span class="ads-btn ads-btn-outline">立即进入</span>
</a>
<style>
/* 卡片：圆角6px + 无阴影 + 自定义背景图片+黑色遮罩 */
.ads {
display: block;
padding: 40px 15px;
text-align: center;
color: #fff !important;
/* ====================== 核心修改区域 ====================== */
/* 1. 替换这里为你的背景图片链接 */
/* 2. rgba(0,0,0,0.1) = 10%黑色遮罩，0.1=10%，0.2=20%，以此类推 */
background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url("这里填写你的背景图片链接.jpg");
/* 背景图片自适应铺满卡片，居中显示 */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* ========================================================== */
border-radius: 6px;
transition: all 0.3s ease;
text-decoration: none;
}
/* 悬浮仅轻微上浮，无阴影 */
.ads:hover {
transform: translateY(-3px);
}
.ads h4 {
margin: 0;
font-size: 22px;
font-weight: bold;
}
.ads h5 {
margin: 10px 0 0;
font-size: 14px;
font-weight: bold;
}
.ads .ads-btn {
margin-top: 20px;
font-weight: bold;
}
/* 按钮样式（保持优化后的醒目一体化效果） */
.ads-btn {
display: inline-block;
font-weight: 600;
margin-top: 10px;
text-align: center;
user-select: none;
border: none;
padding: 0 36px;
line-height: 38px;
font-size: 14px;
border-radius: 50px;
outline: 0;
transition: all 0.3s ease-in-out;
}
.ads-btn-outline {
color: #fff;
background-color: #5368d9;
border: none;
}
.ads-btn-outline:hover {
color: #fff;
background-color: #3b4fbb;
}
</style>7, 侧边栏限时活动推荐版块
<style>
.zibi_sidebar_custom_activity_card_unique {
width: 100%;
min-height: 340px;
margin: 0 0 20px 0;
border-radius: 8px;
padding: 0;
overflow: hidden;
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.zibi_sidebar_custom_activity_card_unique:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.zibi_sidebar_custom_corner_tag_unique {
position: absolute;
top: 12px;
right: 8px;
background: rgba(255, 255, 255, 0.85);
border-radius: 999px;
padding: 2px 10px;
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #333;
backdrop-filter: blur(2px);
z-index: 3;
white-space: nowrap;
}
.zibi_sidebar_custom_corner_tag_unique i {
color: #ff5722;
}
.zibi_sidebar_custom_content_unique {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px 15px;
background: rgba(0, 0, 0, 0.7);
}
.zibi_sidebar_custom_content_unique h4 {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
}
.zibi-activity-link {
color: #ffffff;
text-decoration: none;
}
.zibi-activity-link:hover {
color: #ff5722;
}
.zibi-activity-link.disabled {
pointer-events: none;
color: #999 !important;
cursor: default;
}
.zibi_sidebar_custom_content_unique p {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
function updateCountdown() {
document.querySelectorAll('.zibi-countdown').forEach(el => {
try {
const endTime = Date.parse(el.dataset.end.replace(/-/g, '/'));
const now = Date.now();
const diff = endTime - now;
const link = el.closest('.zibi_sidebar_custom_activity_card_unique').querySelector('.zibi-activity-link');
if (diff <= 0) {
el.textContent = '活动已结束';
link.classList.add('disabled');
return;
}
// 计算天/时/分/秒
const day = Math.floor(diff / 86400000);
const hour = Math.floor((diff % 86400000) / 3600000);
const min = Math.floor((diff % 3600000) / 60000);
const sec = Math.floor((diff % 60000) / 1000);
el.textContent = `${day}天 ${hour.toString().padStart(2,'0')}:${min.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}`;
link.classList.remove('disabled');
} catch (e) {
el.textContent = '时间设置错误';
}
});
}
updateCountdown();
setInterval(updateCountdown, 1000);
});
</script>
<!-- ===================== 活动卡片1 ===================== -->
<div class="zibi_sidebar_custom_activity_card_unique" style="background-image: url('https://picsum.photos/600/400');">
<div class="zibi_sidebar_custom_corner_tag_unique">
<i class="fa fa-clock-o"></i>
<span class="zibi-countdown" data-end="2026-12-31 23:59:59">加载中...</span>
</div>
<div class="zibi_sidebar_custom_content_unique">
<h4>
<a href="https://www.baidu.com" class="zibi-activity-link" target="_blank">限时活动标题</a>
</h4>
<p>限时活动开启了！！</p>
</div>
</div>
<!-- ===================== 活动卡片2（复制即用） ===================== -->
<!--
<div class="zibi_sidebar_custom_activity_card_unique" style="background-image: url('你的图片链接');">
<div class="zibi_sidebar_custom_corner_tag_unique">
<i class="fa fa-clock-o"></i>
<span class="zibi-countdown" data-end="2025-10-01 18:00:00">加载中...</span>
</div>
<div class="zibi_sidebar_custom_content_unique">
<h4>
<a href="你的链接" class="zibi-activity-link" target="_blank">第二个活动标题</a>
</h4>
<p>多卡片独立倒计时，互不干扰</p>
</div>
</div>
-->以上小工具在子比主题内测试过
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容