滑动条效果_html/css_WEB-ITnose

准备将自己做的滑动条效果都放在这篇博文下。

自己的第一个成果

css

body{        background: black;    }    #slider_1{        width: 400px;        height: 2px;        border-radius: 1px;        display: -webkit-flex;        position: relative;        margin: 30px auto;    }        #oSlider{        width: 15px;        height: 15px;        position: absolute;        border: 1px solid rgb(249,247,107);        border-radius: 10px;        background: rgb(249,247,107);        top: -7px;    }    #slider_11{        -webkit-flex:1;        background: rgb(249,247,107);        border-radius: 1px 0 0 1px;    }    #slider_12{        -webkit-flex:1;        background: rgba(255,255,255,0.3);        border-radius: 0 1px 1px 0px;    }　　 

　　　#num{
　　　　　　font-size: 24px;
　　　　　　color: white;
　　　　　　display: block;
　　　　　　text-align: center;
　　　　}

html

        


      
查看更多关于滑动条效果_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did107684