css表格列表文字飞入动画效果代码-html代码-BFW代码库

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.........完整代码请登录后点击上方下载按钮下载查看