css模仿地铁公交线路当前站点圈圈进度效果代码

代码语言:html

所属分类:其他

代码描述:css模仿地铁公交线路当前站点圈圈进度效果代码

代码标签: css 地铁 公交 线路 当前 站点 圈圈 进度

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
   
<meta charset="UTF-8">
<style>
html,body {
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        font-family:'Nunito',sans-serif;
        color:#000;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
}
form {
        width:90%;
        max-width:500px;
}
form #form-title {
        font-weight:400;
        text-align:center;
}
form #debt-amount-slider {
        display:flex;
        flex-direction:row;
        align-content:stretch;
        position:relative;
        width:100%;
        height:50px;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
}
form #debt-amount-slider:before {
        content:" ";
        position:absolute;
        height:2px;
        width:100%;
        top:50%;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        background:#000;
}
form #debt-amount-slider input,form #debt-amount-slider label {
        box-sizing:border-box;
        flex:1;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        cursor:pointer;
}
form #debt-amount-slider label {
        position:absolute;
        width:20%;
        height:100%;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
}
form #debt-amount-slider label:nth-child(2) {
        left:0%;
}
form #debt-amount-slider label:nth-child(4) {
        left:20%;
}
form #debt-amount-slider label:nth-child(6) {
        left:40%;
}
form #debt-amount-slider label:nth-child(8) {
        left:60%;
}
form #debt-amount-slider label:nth-child(10) {
        left:80%;
}
form #debt-amount-slider label:before {
        content:attr(data-debt-amount);
        position:absolute;
        left:50%;
        padding-top:10px;
        -webkit-transform:translate(-50%,45px);
        transform:translate(-50%,45px);
        font-size:14px;
        letter-spacing:0.4px;
        font-weight:400;
        white-space:nowrap;
        opacity:0.85;
        transition:all 0.15s ease-in-out;
}
form #debt-amount-slider label:after {
        content:" ";
        position:absolute;
        left:50%;
        top:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        width:30px;
        height:30px;
        border:2px solid #000;
        background:#fff;
        border-radius:50%;
        pointer-events:none;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        z-index:1;
        cursor:po.........完整代码请登录后点击上方下载按钮下载查看

网友评论0