Tootaio/dinner.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add founders list scrolling banner

Browse Source 
This commit introduces a 'breaking news' style scrolling banner at the bottom of the page. The banner displays the list of the first
founders from 2005. It includes the necessary HTML structure and CSS for styling, animation, and responsiveness.
This commit is contained in:
xiaomai
2025-11-01 21:16:30 +08:00
parent 9defcb596b
commit e15d9a881c
1 changed files with 98 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
20251116/photowall/index.html
View File

@@ -25,6 +25,49 @@
height: auto !important;
}
}
/* Breaking News 样式 */
.breaking-news-container {
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}
.breaking-news-label {
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
}
.breaking-news-content {
display: inline-block;
white-space: nowrap;
/* padding-left: 120px; 为标签留出空间 */
animation: scrollText 120s linear infinite;
}
.breaking-news-content span {
margin: 0 15px;
font-weight: bold;
}
@keyframes scrollText {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
/* 响应式调整 */
@media (max-width: 768px) {
.breaking-news-content {
font-size: 14px;
padding-left: 100px;
}
.breaking-news-label {
padding: 10px 15px;
font-size: 14px;
}
}
</style>
</head>
<body class="bg-red-500 min-h-screen flex items-center justify-center">
@@ -145,6 +188,61 @@
</div> -->
</div>
</div>
<!-- Breaking News 滚动条 -->
<div
class="fixed bottom-0 left-0 w-full bg-red-700 text-yellow-400 text-2xl py-3 overflow-hidden z-50 breaking-news-container"
>
<div
class="absolute left-0 top-0 bg-red-900 text-yellow-100 px-4 py-3 font-bold z-10 breaking-news-label"
>
2005年第一届创办人名表：
</div>
<div class="breaking-news-content">
<span>楊吉陽(已故)</span>
<span>唐華(已故)</span>
<span>許仁菘(已故)</span>
<span>許汶信(已故)</span>
<span>劉炎松(已故)</span>
<span>楊淑清(已故)</span>
<span>黃芝芳(已故)</span>
<span>|</span>
<span>劉吉棟</span>
<span>許任隆</span>
<span>楊順發</span>
<span>吳祥森</span>
<span>林庭芝</span>
<span>林炳華</span>
<span>林庭珠</span>
<span>李玉媚</span>
<span>林應財</span>
<span>許斯杰</span>
<span>許敏捷</span>
<span>許智興</span>
<span>劉德祥</span>
<span>李豫梅</span>
<span>黄潮明</span>
<span>楊信陞</span>
<span>蔡立義</span>
<span>林炳龍</span>
<span>劉振昌</span>
<span>劉迪發</span>
<span>楊美雄</span>
<span>彭三媚</span>
<span>楊光豐</span>
<span>楊秀娥</span>
<span>莊秀清</span>
<span>李玉嬌</span>
<span>趙惜嬌</span>
<span>陳秀珠</span>
<span>張彩雁</span>
<span>劉暐康</span>
<span>王貴興</span>
<span>劉林順</span>
<span>劉益華</span>
<span>紀有平</span>
</div>
</div>
</div>
<script>