css实现鼠标滑动左下角弹框带动画效果

87 阅读1分钟

1.html:

2.css代码:

.kuang {

        height: 500px;

        width: 400px;

        // background-color: #fff;

        position: absolute;

        z-index: 10;

        bottom: 0;

        transform: translateX(-390px)

    }

    .kuang:hover {

      animation: myanimation 3s linear 1;

      animation-fill-mode:forwards;

      background-color: #fff;

    }

    @keyframes myanimation {

        0%{

            transform: translateX(-400px);

        }

        100%{

            transform:translateX(0);

        }

    }

3.实现效果: