css
*{
padding: 0;
margin: 0;
list-style-type: none;
}
#box{
width: 190px;
height: 40px;
border: 1px solid red;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#bg{
width: 200%;
height: inherit;
background-image: linear-gradient(to right,#1C8463 15%,#9834B9);
transform: translate3d(0,0,0);
}
#line{
position: absolute;
width: 3px;
height: inherit;
background-color: #999;
top: 0;
left: 0;
cursor: ew-resize;
transform: translate3d(10px,0,0);
}
#box:hover>#ll{
opacity: 1;
}
#ll{
position: absolute;
width: inherit;