纯css实现jquery slideup效果

style:

.row {
        background: red;
        width: 400px;
        height: 400px;
        overflow: hidden;
        position: relative;
    }

    .slide {
        width: 100%;
        background: yellow;
        text-align: center;
        position: absolute;
        bottom: 0;
        transform: translateY(100%);
        transition: all 1s;
    }

    .row:hover .slide {
        transform: translateY(0%);
    }

body:

我是上移块中的内容!

我是上移块中的内容!

我是上移块中的内容!

 

 

 

你可能感兴趣的:(基础知识巩固)