css3鼠标悬浮滑块

        

            
你还发爱国
            

                

                    
菜单一
                    
菜单二
                    
菜单三
                
            
        
    

.block {
            width: 300px;
            height: 400px;
            overflow: hidden;
        }
        
        .wrap {
            width: 600px;
            height: 400px;
            background: red;
            transition: transform .75s;
            transform: translateX(0px)
        }
        
        .block:hover .wrap {
            transition: transform .75s;
            transform: translateX(-300px)
        }
        
        .sliderleft {
            float: left;
            width: 300px;
            height: 400px;
            background: #399999;
        }
        
        .slider {
            float: left;
            width: 300px;
            background: orange;
            height: 400px;
        }
        
        .memulist li {
            transition: opacity 0.25s, transform 0.25s;
            opacity: 0;
            transform: translate(-30px, 35px)
        }
        
        .block:hover .memulist li {
            opacity: 1;
            transform: translate(0, 0);
        }
        
        .block:hover .memulist li:nth-child(1) {
            /* transition: opacity 0.25s, transform 0.25s; */
            transition-delay: 0.25s;
        }
        
        .block:hover .memulist li:nth-child(2) {
            /* transition: opacity .5s, transform .5s;
             */
            transition-delay: 0.5s;
        }
        
        .block:hover .memulist li:nth-child(3) {
            /* transition: opacity .75s, transform .75s; */
            transition-delay: 0.75s;
        }