css滑块样例

样式部分

    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        position: relative;
        width: 100%;
        height: 630px;
        border: 4px solid black;
        overflow: hidden;
    }
    .border1{
        position: absolute;
        margin-top: 50%;
        width: 200px;
        height: 200px;
        transition:1.5s all ;
        background-color: #007aff;
    }
    .border2{
        position: absolute;
        left:-100%;
        width: 30%;
        height: 50%;
        transition: all 1.5s;
        background-color: #999999;
    }

JavaScript部分

先获取节点,再对该节点的样式进行修改,translateY意为将该元素向Y轴反方向偏移-200%,其余以此类推