vue横向拖动进行数值增减效果代码
代码语言:html
所属分类:表单美化
代码描述:vue横向拖动进行数值增减效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.vue-scrubber {
font-size: 15px;
padding: 0.5em;
border: 0;
cursor: ew-resize;
background: rgba(0, 0, 0, 0.08);
color: white;
-webkit-user-select: none;
font-feature-settings: "lnum" 1;
}
.vue-scrubber:hover, .vue-scrubber:focus {
outline: 0;
box-shadow: none;
}
/** Demo CSS */
body {
font-family: "Helvetica Neue", "Arial", sans-serif;
background: #6247AA;
color: #E2CFEA;
-webkit-font-smoothing: antialiased;
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}
h1 {
font-weight: 100;
letter-spacing: 2px;
}
h1 strong {
letter-spacing: 0;
}
p {
line-height: 1.4;
-webkit-font-smoothing: antialiased;
opacity: 0.8;
font-size: 1rem;
}
.parameters {
margin-top: 4rem;
background: #6247AA;
}
label {
display: block;
margin-bottom: 2rem;
}
label span {
display: inline-block;
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0