关于表格hover的一点小建议

[CNGZHUI]

之前推荐给朋友的时候,朋友看了一遍说表格这部分的hover样式不好看,遂过来issues一下
主要就是说hover的时候的样式太过生硬了,不好看之类的,鄙人不才,瞎写了一个,斗胆放上来吧

table{
border-collapse: collapse;
width: 100%;
}
th{
border-bottom: 1px solid #ccc;
color: #333;
font-size: 14px;
font-weight: 400;
padding: 8px 8px 12px;
}
td{
color: #5d5d5d;
font-size: 12px;
float: inherit;
text-align: center;
padding: 13px 8px;
word-wrap: break-word;
}
.ho1{
-webkit-transition: all .8s;
-moz-transition: all .8s;
-ms-transition: all .8s;
-o-transition: all .8s;
transition: all .8s linear;
}
.ho1:hover{
background: rgba(128, 255, 0, 0.7);
transition: all 1.1s linear;
}

    .ho2{
        transition:All 0.4s ease-in-out;
        -webkit-transition:All 0.4s ease-in-out;
        -moz-transition:All 0.4s ease-in-out;
        -o-transition:All 0.4s ease-in-out;
    }
    .ho2:hover{
        background: rgba(128, 255, 0, 0.7);
        transform:scale(1.005);
        -webkit-transform:scale(1.005);
        -moz-transform:scale(1.005);
        -o-transform:scale(1.005);
        -ms-transform:scale(1.005);
    }
    .ho3{
        transition: all .5s linear;
        width: auto;
        height: auto;
    }
    .ho3:hover{
        animation: cs 0.5s linear 0s 1;
        -webkit-animation-fill-mode:forwards;/*让动画停在最后是这个属性，*/
        animation-fill-mode:forwards;
        transition: all 1.5s linear;
    }
    @keyframes cs{
        0% {
            background: rgba(128, 255, 0, 0);
        }
        50% {
            transform:scale(1);
            background: rgba(128, 255, 0, 1);
        }
        100% {
            transform:scale(1.1);
            background: rgba(128, 255, 0, 0);
        }
    }

    ul{
        width: 300px;
        border: red;
        text-orientation: inherit;
        counter-increment: none;
        list-style:none;
    }
    ul li{
        width: 300px;
        height: 70px;
        line-height: 70px;
        background: #fff;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        border: 1px solid #eee;
    }
    ul li:hover .ce{
        animation: ce-opacity 0.5s linear 0s 1;
        -webkit-animation-fill-mode:forwards;/*让动画停在最后是这个属性，*/
        animation-fill-mode:forwards;
    }
    ul li a{
        position: relative;
        left: -50px;
        color: #333;
        top: -30px;
        text-decoration:none;
    }
    .ce{
        background: #fff;
        border-radius: 50%;
        width: 70px;
        height: 70px;
        display: inline-block;
        margin: 0 auto;
    }

    @keyframes ce-opacity{
        0% {
            background: rgba(128, 255, 0,0);
        }
        50% {
            transform:scale(4);
            background: rgba(128, 255, 0,1);
        }
        100% {
            transform:scale(16);
            background: rgba(128, 255, 0,0);
        }
    }

上面的是css,下面的是html

index	header0	header1	header2	header3
null	1	2	3	4
null	1	2	3	4
null	1	2	3	4
/*华丽丽的分割线*/
null	1	2	3	4
null	1	2	3	4
null	1	2	3	4
/*华丽丽的分割线*/
null	1	2	3	4