css表格列表文字飞入动画效果代码
代码语言:html
所属分类:表格
代码描述:css表格列表文字飞入动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script> <style> *{ margin:0; padding:0; box-sizing:border-box; } ul,li{ list-style: none; } body{ background: rgba(8,48,75,1); } .yd-right{ width: 100vw; height: 50vh; background-color:rgba(0,0,0,0.6); position:absolute; z-index: 2; color: #ffffff; } .el-tabs--card>.el-tabs__header .el-tabs__nav{ border: none !important; } .header-table{ color: #ffffff; text-align: center; border-bottom: 1px solid #cccccc; } .header-table tbody tr{ height: 30px; } .header-table tbody tr td{ width: 33vw; } .center-table{ text-align: center; } /*滑入动画效果*/ .center-table tbody tr:nth-child(1){ animation: movein 0.3s 0.12s both; } .center-table tbody tr:nth-child(2){ animation: movein 0.3s 0.24s both; } .center-table tbody tr:nth-child(3){ animation: movein 0.3s 0.36s both; } .center-table tbody tr:nth-child(4){ animation: movein 0.3s 0.48s both; } .center-table tbody tr:nth-child(5){ animation: movein 0.3s 0.6s both; } .center-table tbody tr:nth-child(6){ animation: movein 0.3s 0.72s both; } .center-table tbody tr:nth-child(7){ animation: movein 0.3s 0.8.........完整代码请登录后点击上方下载按钮下载查看
网友评论0