table元素纯css无限滚动,流畅过度

server/2024/11/23 21:32:03/

在这里插入图片描述

<template><div class="monitor-table-container"><table class="monitor-table"><thead><th>标题</th><th>标题</th><th>标题</th><th>标题</th></thead><tbody ref="scrollTbody" v-for="index in 2" :key="index"><tr v-for="item in 6" :key="item"><td>value</td><td>value</td><td>value</td><td>value</td></tr></tbody></table></div>
</template>
<script setup lang="ts"></script>
<style scoped lang="less">
@keyframes scroll {0% {transform: translateY(0);}100% {transform: translateY(-100%);}
}table thead,
tbody tr {display: table;width: 400px;table-layout: fixed;
}.monitor-table-container {width: 400px;overflow: hidden;height: 240px;border: 1px solid red;
}.monitor-table {position: relative;thead {position: absolute;z-index: 1;background: rgb(223, 239, 254);th {text-align: center;padding: 8px 16px 7px 16px;color: rgba(51, 51, 51, 1);}}tbody {z-index: 0;animation: scroll 5s linear infinite;display: block;tr {border-bottom: 1px solid rgba(153, 153, 153, 0.2);td {text-align: center;padding: 8px 16px 7px 16px;color: rgba(51, 51, 51, 1);}}}
}
</style>

http://www.ppmy.cn/server/144357.html

相关文章

RabbitMQ高可用延迟消息惰性队列

目录 生产者确认 消息持久化 消费者确认 TTL延迟队列 TTL延迟消息 惰性队列 生产者确认 生产者确认就是&#xff1a;发送消息的人&#xff0c;要确保消息发送给了消息队列&#xff0c;分别是确保到了交换机&#xff0c;确保到了消息队列这两步。 1、在发送消息服务的ap…

基于 NCD 与优化函数结合的非线性优化 PID 控制

基于 NCD 与优化函数结合的非线性优化 PID 控制 1. 引言 NCD&#xff08;Normalized Coprime Factorization Distance&#xff09;优化是一种用于非线性系统的先进控制方法。通过将 NCD 指标与优化算法结合&#xff0c;可以在动态调整控制参数的同时优化控制器性能。此方法特别…

Applied Intelligence投稿

一、关于手稿格式&#xff1a; 1、该期刊是一个二区的&#xff0c;模板使用Springer nature格式&#xff0c; 期刊投稿要求&#xff0c;详细期刊投稿指南&#xff0c;大部分按Soringernature模板即可&#xff0c;图片表格声明参考文献命名要求需注意。 2、参考文献&#xff…

自动驾驶系列—探索自动驾驶数据管理的核心技术与平台

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

Kotlin return与return@forEachIndexed

Kotlin return与returnforEachIndexed fun main() {val data arrayOf(0, 1, 2, 3, 4)println("a")data.forEachIndexed { index, v ->if (v 2) {//类似while循环中的continue//跳过&#xff0c;继续下一个forEachIndexed迭代returnforEachIndexed}println("…

【手写一个spring】spring源码的简单实现--初始化机制,回调机制

文章目录 A. 初始化机制实现初始化机制的方法1.实现InitializingBean接口 B. 回调机制(Aware)初始化机制和回调机制之间的区别 A. 初始化机制 在Spring框架中&#xff0c;初始化机制是Bean生命周期管理的一个重要组成部分。它确保了Bean在创建和依赖注入完成后&#xff0c;能够…

C语言中的结构体,指针,联合体的使用

目录 1. 概述2. 定义和初始化3. 成员的使用4. 结构体数组5. 结构体套结构体6. 结构体赋值7. 结构体和指针8. 结构体作为函数参数9. 共用体&#xff08;联合体&#xff09;10. typedef就是取别名总结 1. 概述 数组&#xff1a;连续的相同数据类型的集合 结构体&#xff1a;不同…

第十章综合案例——————轮播广告

代码如下&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title>图片轮播效果</title><style type"text/css">*{margin: 0;padding: 0;text-decoration: none;}body{padding: 20px;}#contain…