css+js实现步进数值选择器效果代码
代码语言:html
所属分类:选择器
代码描述:css+js实现步进数值选择器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
}
body, button {
font: 1em/1.5 Inter, sans-serif;
}
body {
background-color:#fe6262;
color: var(--fg);
height: 100vh;
display: grid;
place-items: center;
transition: background-color 0.3s;
}
.stepper {
background-color: var(--fg);
border-radius: 1em;
box-shadow: 0 0.75em 1em hsla(0,0%,0%,0.2);
color: var(--bg);
font-weight: bold;
overflow: hidden;
padding: 0.75em 0.375em;
position: relative;
width: 6em;
height: 3em;
transition:
background-color 0.3s,
color 0.3s,
transform 0.15s ease-in-out;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: #0000;
}
.stepper:active {
transform: scale(0.95);
transition-delay: 0s, 0s, 0.15s;
}
.stepper__btn-area,
.stepper__btn-area:before,
.stepper__btn-click,
.stepper__value {
position: absolute;
}
.stepper__btn-area,
.stepper__btn-area:before,
.stepper__btn-click {
display: block;
top: 0;
left: 0;
}
.stepper__btn-area {
width: 2em;
height: 3em;
}
.stepper__btn-area + .stepper__btn-area {
right: 0;
left: auto;
}
.stepper__btn-area:before {
border-radius: 50%;
box-shadow: 0 0 0 0 var(--bg) inset;
content: "";
opacity: 0;
pointer-events: none;
top: 0.5em;
width: 2em;
height: 2em;
transform: scale(2.5);
transition: all 0.4s ease-out;
}
.stepper__btn-area:not(:disabled):active:before {
box-shadow: 0 0 0 1em var(--bg) inset;
opacity: 0.25;
transform: scale(1);
transition:
opacity 0.2s ease-out,
transform 0.2s ease-out;
}
.stepper__btn-click {
width: 100%;
height: 100%;
}
.stepper__value {
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
display: inline-block;
font-size: 1.5em;
line-height: 1;
top: calc(50% - 0.75rem);
left: calc(50% - 1rem);
text-align: center;
width: 2rem;
height: 1.5rem;
-webkit-user-select: none;
user-select: none;
}
.stepper__value[data-pos="off-left"],
.stepper__value[data-pos="prev"],
.stepper__value[data-pos="next"],
.stepper__value[data-pos="off-right"] {
opacity: 0.5;
}
.stepper__value[data-pos="off-left"] {
transform: translateX(-2.67em) scale(0.5);
}
.stepper__value[data-pos="prev"] {
transform: translateX(-1.33em) scale(0.5);
}
.stepper__value[data-pos="cur"] {
transform: translateX(0);
}
.stepper__value[data-pos="next"] {
transform: translateX(1.33em) scale(0.5);
}
.stepper__value[data-pos="off-right"] {
transform: translateX(2.67em) scale(0.5);
}
.stepper--move-left .stepper__value[data-pos="off-left"] {
animation-name: moveOffLeft;
}
.stepper--move-left .stepper__value[data-pos="prev"] {
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0