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