ckt-kanban/public/scripts/index.css

body {
    font-family: "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB", sans-serif;
    background: url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/tvimg/vmi_tv_bg1.jpg!ora") #000 no-repeat center center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
}

* {
    margin: 0px;
    padding: 0px;
    outline: none;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

.tv_home {
    position: relative;
    color: #fff;

    font-weight: bold;
    text-align: center;
    width: 41.5rem;
    height: 17.9rem;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    transform: translateY(-50%);
}

.tv_home a {
    display: block;
    position: absolute;
    border-radius: 2px;
    transition: transform 0.3s,box-shadow 0.3s;
  
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    box-shadow: 0px 0px 1rem rgba(255, 213, 51, 0);

}

.tv_home a:hover::before,
.tv_home a:focus::before,
.tv_home a:active::before {
    background-color: #fff;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    animation: light 0.3s alternate forwards;
    -webkit-animation: light 0.3s alternate forwards;

}

@keyframes light {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes light {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
    }
}

.tv_home a span {
    position: absolute;
    top: 50%;
    color: #fff;
    transform: translateY(-50%);
    display: block;
    text-align: center;
    width: 100%;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.tv_home a:focus,
.tv_home a:hover,
.tv_home a:active {
    transform: scale(1.15);
    /* transition: all 0.2s; */
    z-index: 999;
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 1);
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none !important;

}

.list1 {
    width: 10rem;
    height: 9.5rem;
    /* background-color: #de4d4d; */
    left: 0;
    top: 0;
    line-height: 1.4;
    font-size: 1.4rem;
    background: -webkit-linear-gradient(120deg, #de4d4d, #cf3a3c);
    background: linear-gradient(120deg, #de4d4d, #cf3a3c);
}

.list2 {
    width: 10rem;
    height: 9.5rem;
    background-color: #c050a0;
    background: -webkit-linear-gradient(120deg, #c050a0, #aa378a);
    background: linear-gradient(120deg, #c050a0, #aa378a);
    left: 10.5rem;
    top: 0;
    line-height: 1.4;
    font-size: 1.4rem;
}

.list3,
.list4,
.list5,
.list6 {
    width: 10rem;
    height: 4.5rem;
    line-height: 1.2;
    font-size: 1rem;
}

.list3 {
    background: -webkit-linear-gradient(120deg, #4bca99, #39b686);
    background: linear-gradient(120deg, #4bca99, #39b686);
    /* background-color: #4bca99; */
    left: 21rem;
    top: 0;
}

.list4 {

    /* background-color: #47cc76; */
    background: -webkit-linear-gradient(120deg, #47cc76, #31b05e);
    background: linear-gradient(120deg, #47cc76, #31b05e);
    left: 31.5rem;
    top: 0;
}

.list5 {

    /* background-color: #4fb251; */
    background: -webkit-linear-gradient(120deg, #4fb251, #369a39);
    background: linear-gradient(120deg, #4fb251, #369a39);
    left: 21rem;
    top: 5rem;
}

.list6 {

    /* background-color: #66b72a; */
    background: -webkit-linear-gradient(120deg, #66b72a, #59a520);
    background: linear-gradient(120deg, #66b72a, #59a520);
    left: 31.5rem;
    top: 5rem;
}

.list7,
.list8,
.list9,
.list10,
.list11 {
    width: 7.9rem;
    height: 8rem;
    top: 10rem;
    line-height: 1.4;
    font-size: 1.15rem;
}

.list7 {

    /* background-color: #0c5782; */
    background: -webkit-linear-gradient(120deg, #1d6c98, #0c5782);
    background: linear-gradient(120deg, #1d6c98, #0c5782);
    left: 0;
}

.list8 {

    /* background-color: #2293d5; */
    background: -webkit-linear-gradient(120deg, #2293d5, #0f78b4);
    background: linear-gradient(120deg, #2293d5, #0f78b4);
    left: 8.4rem;
}

.list9 {

    /* background-color: #e8af27; */
    background: -webkit-linear-gradient(120deg, #e8af27, #cc9513);
    background: linear-gradient(120deg, #e8af27, #cc9513);
    left: 16.8rem;
}

.list10 {

    /* background-color: #ea8921; */
    left: 25.2rem;
    background: -webkit-linear-gradient(120deg, #ea8921, #cf7413);
    background: linear-gradient(120deg, #ea8921, #cf7413);

}

.list11 {

    /* background-color: #4f99b1; */
    background: -webkit-linear-gradient(120deg, #4f99b1, #38859e);
    background: linear-gradient(120deg, #4f99b1, #38859e);
    left: 33.6rem;
}