【动画效果的问题】 | IT修真院·坑乎

动画效果的问题

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

详细描述

截图

代码

.table-col {
    position: relative;
    &:hover .animation-table {
        display: block;
        @keyframes mytable {
            0% {transform: rotate(0);}
            100% {transform: rotate(360deg);}
        }
    }
    &:hover .animation-table2 {
        display: block;
        @keyframes mytable2 {
            0% {transform: rotatey(0);}
            100% {transform: rotatey(360deg);}
        }
    }
    &:hover .animation-table3 {
        display: block;
        @keyframes mytable3 {
            0% {height: 0;}
            100% {height: calc(100% - 48px);}
        }
    }
}
.table {
    table-layout: fixed;
    margin-top: 48px;
    box-shadow: 0 0 3px #D0D6D9;
    border-radius: 3%;
    width: 100%;
    background: #FFFFFF;
}
.animation-table {
    display: none;
    position: absolute;
    left: 15px;
    top: 48px;
    z-index: 1;
    border-radius: 3%;
    width: calc(100% - 30px);
    height: calc(100% - 48px);
    background: rgba(51, 51, 51, .8);
    animation: mytable 1s;
    .at-font1 {
        margin: 40px 0;
        font-size: 14px;
        text-align: center;
        color: rgba(255, 255, 255, 1);
    }
    .at-font2 {
        @extend .at-font1;
        margin: 0 auto 40px;
        width: 80%;
        line-height: 22px;
        text-align: justify;
    }
}
.animation-table2 {
    @extend.animation-table;
    animation: mytable2 1s;
}
.animation-table3 {
    @extend.animation-table;
    animation: mytable3 1s;
}

编辑于2024-11-23