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.84s both;
    }
    .center-table tbody tr:nth-child(8){
        animation: movein 0.3s 0.96s both;
    }
    .center-table tbody tr:nth-child(9){
        animation: movein 0.3s 1.08s both;
    }
    .center-table tbody tr:nth-child(10){
        animation: movein 0.3s 1.2s both;
    }
    .center-table tbody tr{
        transform: translateX(0px);
        transition: 0.3s ease;
    }
    @keyframes movein{
        from{
            transform: translateX(360px);
            opacity: 0;
        }
        to{
            transform: translateX(0px);
            opacity: 1
        }
    }
    /*滑入动画效果*/
    
    .center-table tbody tr:hover td{
        background: rgba(255,255,255,0.6);
        cursor: pointer;
        
    }
    .center-table tbody tr{
        height: 4vh;
    }
    .center-table tbody tr td{
        width: 33vw;
    }
</style>
</head>
<body>
    <div id="map" style="width:100%;height:100%;"></div>

    <section id="yd-data" style="height:100%;">

        <div class="user-test-main">
            <div class="user-test-coent">
                <!--右侧列表-->
                <div class="yd-right">
                    <el-tabs v-model="activeName" type="card" stretch=true>
                        <el-tab-pane label="高速/快速路" name="second">
                            <table class="header-table">
                                <tbody>
                                    <tr height="30px">
                                        <td></td>
                                        <td>道路名称</td>
                                        <td>拥堵指数</td>
                                        <td>平均速度</td>

                                    </tr>
                                </tbody>
                            </table>
                            <table class="center-table" border="0" cellpadding="0" cellspacing="0">
                                <tbody>

                                    <tr height="30px" v-for="item in tableData">
                                        <td>{{item.number}}</td>
                                        <td>{{item.roadname}}</td>
                                        <td>{{item.index}}</td>
                                        <td>{{item.seepd}}</td>

                                    </tr>
                                </tbody>
                            </table>


                        </el-tab-pane>
                    </el-tabs>
                </div>

            </div>
        </div>
    </section>


    <script>
        /*vue实例*/
        var vm = new Vue({
            el:"#yd-data",
            data:function(){
                return{
                    loadDataTimes:0,
                    activeName:'second',
                    tableData:[]
                }
            },
        .........完整代码请登录后点击上方下载按钮下载查看