填充滚动条-html代码-BFW代码库

代码语言：html

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css?family=Hind+Madurai:300,600|Poppins:300&display=swap");

:root {
    --yellow: #ffd049;
    --light-yellow: #fdf2d2;
    --orange: #ffa929;
    --light-gray: #e3e4e8;
    --gray: #71738b;
    --light-blue: #7a7c93;
    --blue: #34385a;

    --slider-handle-size: 14px;
    --slider-handle-border-radius: 2px;
    --slider-handle-margin-top: -4px;
    --slider-track-height: 6px;
    --slider-track-border-radius: 4px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
}

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

#sliderContainer {
    width: 100%;
    max-width: 440px;

    padding: 56px 40px;

    border-radius: 40px;

    box-shadow: 0px 8px 40px rgba(128, 128, 128, 0.15);
}

#sliderContainer>div:first-child {
    margin-bottom: 48px;
}

.tick-slider-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.tick-slider-header>h5 {
    margin: 0;

    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--gray);
}

.tick-slider {
    position: relative;

    width: 100%;
}

.tick-slider-value-container {
    position: relative;
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 12px;

    font-family: "Hind Madurai", sans-serif;
    font-size: 18px;
    color: var(--gray);
}

.tick-slider-value {
    position: absolute;
    top: 0;

    font-weight: bold;

    color: var(--blue);

    border-radius: var(--slider-handle-border-radius);
}

.tick-slider-value>div {
    animation: bulge 0.3s ease-out;
}

.tick-slider-background,
.tick-slider-progress,
.tick-slider-tick-container {
    position: absolute;
    bottom: 5px;
    left: 0;

    height: var(--slider-track-height);

    pointer-events: none;

    border-radius: var(--slider-track-border-radius);

    z-index: -1;
}

.tick-slider-background {
    width: 100%;
    background-color: var(--light-gray);
}

.tick-slider-progress {
    background-color: var(--yellow);
}

.tick-slider-tick-container {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 calc(var(--slider-handle-size) / 2);
}

.tick-slider-tick {
    width: 2px;
    height: 2px;

    border-radius: 50%;

    background-color: white;
}

.tick-slider-label {
    opacity: 0.85;
    transition: opacity 0.1s ease;
}

.tick-slider-label.hidden {
    opacity: 0;
}

@keyframes bulge {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/*

    REMOVE SLIDER STYLE DEFAULTS

*/
input[type="range"] {
    -webkit-appearance: none;

    width: 100%;
    height: 100%;

    background: transparent;
    outline: none;

    margin: 5px 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;

    border: none;
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]::-moz-focus-outer {
    border: 0;
}

/*

    HANDLE

*/
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;

    width: var(--slider-handle-size);
    height: var(--slider-handle-size);

    background: var(--orange);

    border-radius: var(--slider-handle-border-radius);

    cursor: pointer;

    margin-top: var(--slider-handle-margin-top);
  
    -webkit-transform: scale(1);
    transform: scale(1);

    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
    transform: scale(1.2);
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;

    width: var(--slider-handle-size);
    height: var(--slider-handle-size);

    background: var(--orange);

    border: none;
    border-radius: var(--slider-handle-border-radius);

    cursor: pointer;

    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus::-moz-range-thumb {
    transform: scale(1.2);
}

/*

    TRACK

*/

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--slider-track-height);

    cursor: pointer;

    background: none;

    border-radius: var(--slider-track-border-radius);
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: var(--slider-track-height);

    cursor: pointer;

    background: none;

    border-radius: var(--slider-track-border-radius);
}

input[type="range"]:focus::-webkit-slider-runnable-track {
    background: none;
}
input[type="range"]:active::-webkit-slider-runnable-track {
    background: none;
}
</style>

</head>
<body translate="no">

<div id="wrapper">
<div id="sliderContainer">
<div class="tick-slider">
<div class="tick-slider-header">
<h5><label for="weightSlider">Total weight</label></h5>
<h5>k.........完整代码请登录后点击上方下载按钮下载查看

填充滚动条

网友评论0

react图片表单卡片效果代码

css美化checkbox实现立体质感开关切换效果代码

css美化checkbox开关实现日夜切换代码

react实现可显示隐藏密码字符的输入框效果代码

div+css实现超简洁的登录表单页面代码

gsap+svg实现炫酷复古未来主义单选按钮点击动画效果代码

div+css实现全屏注册登录一体翻转表单页面代码

js+css实现分体式自聚焦验证码输入框代码

js+css实现可配置炫酷输入框placeholder扫光走光动画效果代码

js+css实现数字验证码分体式输入框代码