#drag{ 
    position: relative;
    background-color: #e8e8e8;
    width: 222px;
    height: 34px;
    line-height: 34px;
    text-align: center;
}
#drag .handler{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 32px;
    border: 1px solid #ccc;
    cursor: move;
}

.dragtishi{
    font-size: 16px;
    display: block;
    text-align: center;
    margin-top: 10%;
}
.handler_bg{
    background: #fff url("http://csshop.fengj.com/image/godrag.png") no-repeat center;
}
.handler_ok_bg{
    background: #fff url("http://csshop.fengj.com/image/dragdone.png") no-repeat center;
}
#drag .drag_bg{
    background-color: #7ac23c;
    height: 34px;
    width: 0px;
}
#drag .drag_text{
    position: absolute;
    top: 0px;
    width: 222px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select:none;
    -ms-user-select:none; 
}
 .slidetounlock{
            font-size: 12px;
            background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            -webkit-animation:slidetounlock 3s infinite;
            -webkit-text-size-adjust:none
        }
        @-webkit-keyframes slidetounlock{0%{background-position:-200px 0} 100%{background-position:200px 0}}