/* 基础表格样式，让效果更明显 */ table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 12px 15px; text-align: left; } th { background-color: #f2f2f2; } /* 方案一：简单的行悬停动画 */ tr { transition: background-color 0.3s ease, transform 0.3s ease; } tr:hover { background-color: #e0f7fa; /* 浅蓝色背景 */ transform: scale(1.01); /* 轻微放大 */ box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 增加阴影 */ z-index: 1; /* 确保放大时不会被遮挡 */ position: relative; /* 配合z-index */ } /* 方案二：单元格点击反馈动画 */ td { transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer; /* 提示可点击 */ } td:active { /* 模拟点击按下状态 */ background-color: #c8e6c9; /* 浅绿色 */ color: #333; transform: translateY(1px); /* 轻微下沉 */ } /* 方案三：数据加载或新增行的入场动画 (需要JS配合添加类) */ @keyframes fadeInSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .new-row-animation { animation: fadeInSlideIn 0.5s ease-out forwards; } /* 方案四：特定单元格闪烁提示 (例如，数据更新) */ @keyframes highlightPulse { 0% { background-color: transparent; } 50% { background-color: #fffacd; } /* 柠檬纱 */ 100% { background-color: transparent; } } .highlight-cell { animation: highlightPulse 1.5s ease-in-out 2; /* 闪烁两次 */ }| 姓名 | 年龄 | 城市 |
|---|---|---|
| 张三 | 30 | 北京 |
| 李四 | 25 | 上海 |
| 王五 | 35 | 广州 |
/* CSS */@keyframes fadeOutSlideUp { from { opacity: 1; transform: translateY(0); max-height: 50px; /* 假设行高最大值 */ padding-top: 12px; padding-bottom: 12px; } to { opacity: 0; transform: translateY(-20px); max-height: 0; /* 收缩高度 */ padding-top: 0; padding-bottom: 0; overflow: hidden; /* 隐藏内容溢出 */ }}.fade-out-row { animation: fadeOutSlideUp 0.6s ease-out forwards; /* forwards让动画停留在最后一帧 */}
// JavaScript (简化示例)function deleteRowWithAnimation(rowElement) { rowElement.classList.add('fade-out-row'); // 添加动画类 // 监听动画结束事件，动画结束后移除元素 rowElement.addEventListener('animationend', () => { rowElement.remove(); }, { once: true }); // { once: true } 确保事件只触发一次}// 假设你有一个删除按钮，点击时调用这个函数// const deleteButton = document.getElementById('some-delete-button');// deleteButton.addEventListener('click', () => {// const targetRow = document.getElementById('row-to-delete');// if (targetRow) {// deleteRowWithAnimation(targetRow);// }// });
@media (prefers-reduced-motion: reduce) { /* 在用户偏好减少动态效果时，禁用或简化动画 */ tr, td, .new-row-animation, .highlight-cell { transition: none !important; /* 禁用所有过渡 */ animation: none !important; /* 禁用所有动画 */ } /* 或者只保留最基本的视觉提示 */ tr:hover { background-color: #e0f7fa; /* 仅改变背景色，不缩放 */ transform: none; box-shadow: none; }}
以上就是如何为HTML表格添加动画效果？CSS怎么实现？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1567209.html
微信扫一扫 
支付宝扫一扫 
