公司app与网站建设方案大一html网页制作作业
animation可以设置滚动时间的快慢,时间越长，滚动越慢。
结合@keyframes设置横向向左滚动,滚动的开始和滚动的结束。
使用粘性定位，定位第一列和最后一列。
效果图如下：
html代码供大家参考：
<style>.wrapper{width: 80%;height: 300px;border: 1px solid #ccc;}/* 深蓝主题 */.data-panel {background: #1a365d;padding: 5px;border-radius: 8px;color: white;font-family: Arial, sans-serif;}/* 固定列布局 */.layout-wrapper {display: grid;grid-template-columns: 120px 1fr 80px;position: relative;}/* 固定列样式 */.fixed-column {position: sticky;z-index: 2;background: #2c5282;padding: 12px;border-bottom: 1px solid #1a365d;}/* 左侧时段列 */.time-label {left: 0;box-shadow: 2px 0 5px rgba(0,0,0,0.3);}/* 右侧汇总列 */.summary-col {box-shadow: -2px 0 5px rgba(0,0,0,0.3);}/* 无限滚动容器 */.scroll-container {overflow: hidden;position: relative;height: 40px;}/* 无限滚动内容 */.time-slider {display: flex;position: absolute;white-space: nowrap;animation: scroll 20s linear infinite;}@keyframes scroll {0% { transform: translateX(0); }100% { transform: translateX(-20%); }}/* 时间块样式 */.time-block {width: 120px;padding: 12px;border-right: 1px solid #2a4365;text-align: center;flex-shrink: 0;}/* 数据行公共样式 */.data-row {display: grid;grid-template-columns: 120px 1fr 80px;border-bottom: 1px solid #2a4365;}.data-cell {width: 120px;padding: 12px;text-align: center;}</style><div class="wrapper"><div class="data-panel"><!-- 表头 --><div class="layout-wrapper"><div class="fixed-column time-label">时段</div><div class="scroll-container"><div class="time-slider"><div class="time-block">08:30-10:30</div><div class="time-block">10:30-12:30</div><div class="time-block">14:30-16:30</div><div class="time-block">16:30-18:30</div><div class="time-block">18:30-20:30</div><div class="time-block">20:30-22:30</div><div class="time-block">22:30-00:30</div><div class="time-block">00:30-02:30</div><div class="time-block">02:30-04:30</div><div class="time-block">04:30-06:30</div><div class="time-block">06:30-08:30</div></div></div><div class="fixed-column summary-col">汇总</div></div><!-- 数据行 --><div class="data-row"><div class="fixed-column time-label">投入</div><div class="scroll-container"><div class="time-slider"><div class="data-cell">269</div><div class="data-cell">209</div><div class="data-cell">263</div><div class="data-cell">337</div><div class="data-cell">337</div><div class="data-cell">311</div><div class="data-cell">267</div><div class="data-cell">269</div><div class="data-cell">209</div><div class="data-cell">263</div><div class="data-cell">287</div></div></div><div class="fixed-column summary-col">2159</div></div></div></div><script></script>LayUI模板语法：
<div class="data-panel"><!-- 表头 --><div class="layout-wrapper">{{# layui.each(d.headList, function(index, item){ }}<div class="fixed-column time-label">{{item.time}}</div><div class="scroll-container"><div class="time-slider">{{# layui.each(item.slider, function(index1, item1){ }}<div class="time-block">{{item1}}</div>{{# }); }}</div></div><div class="fixed-column summary-col">{{item.all}}</div>{{# }); }}</div><!-- 数据行 -->{{# layui.each(d.contentList, function(index, item){ }}<div class="data-row"><div class="fixed-column time-label">{{item.TIME}}</div><div class="scroll-container"><div class="time-slider">{{# layui.each(item.SLIDER, function(index1, item1){ }}<div class="data-cell">{{item1}}</div>{{# }); }}</div></div><div class="fixed-column summary-col">{{item.ALL}}</div></div>{{# }); }}</div>伪数据：
headList: [{time:"时段",slider:["08:30-10:30","10:30-12:30","12:30-14:30","14:30-16:30","16:30-18:30","18:30-20:30","20:30-22:30","22:30-00:30","00:30-02:30","02:30-04:30","04:30-06:30","06:30-08:30"],all:"汇总"}],contentList:[{TIME:"投入",SLIDER:["111","222","333","444","555","666","777","777","777","777","777","777"],ALL:"5678"},{TIME:"产出",SLIDER:["111","222","333","444","555","666","777","777","777","777","777","777"],ALL:"5828"}]