如何將動畫放在輸入類型的範圍上::懸停？

Question

在這裏，我想在輸入類型的範圍拇指上放一些動畫。 在這裏我做了所有的事情，但我沒有找到動畫效果懸停在這裏的解決方案是示例和我的代碼.. 請給解決方案。

下面是一個例子，正是我想要的。

@import 'bourbon'; 
 

 
$slider-width-number: 240; 
 
$slider-width: #{$slider-width-number}px; 
 
$slider-height: 2px; 
 
$background-slider: #c7c7c7; 
 
$background-filled-slider: #00BCD4; 
 
$thumb-width: 18px; 
 
$thumb-height: 18px; 
 
$thumb-radius: 50%; 
 
$thumb-background: #00BCD4; 
 
$thumb-box-shadow: 2px 2px 1px 10px #00BCD4; 
 
$thumb-border: 1px solid #777; 
 
$shadow-size: -8px; 
 
$fit-thumb-in-slider: -8px; 
 

 

 
@function makelongshadow($color, $size) { 
 
    $val: 5px 0 0 $size $color; 
 
    
 
    @for $i from 6 through $slider-width-number { 
 
    $val: #{$val}, #{$i}px 0 0 $size #{$color}; 
 
    } 
 
    
 
    @return $val; 
 
} 
 

 
div { 
 
    height: 100px; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
input { 
 
    align-items: center; 
 
    appearance: none; 
 

 
    background: none; 
 
    cursor: pointer; 
 
    display: flex; 
 
    height: 100%; 
 
    min-height: 50px; 
 
    overflow: hidden; 
 
    width: $slider-width; 
 

 
    &:focus { 
 
    box-shadow: none; 
 
    outline: none; 
 
    } 
 
    
 
    &::-webkit-slider-runnable-track { 
 
    background: $background-filled-slider; 
 
    content: ''; 
 
    height: $slider-height; 
 
    pointer-events: none; 
 
    } 
 
    
 
    &::-webkit-slider-thumb { 
 
    @include size($thumb-width $thumb-height); 
 
    
 
    appearance: none; 
 
    background: $thumb-background; 
 
    border-radius: $thumb-radius; 
 
    box-shadow: makelongshadow($background-slider, $shadow-size); 
 
    margin-top: $fit-thumb-in-slider; 
 
    border: $thumb-border; 
 
    
 
    } 
 
    
 
    
 
    &::-moz-range-track { 
 
    width: $slider-width; 
 
    height: $slider-height; 
 
    } 
 

 
    &::-moz-range-thumb { 
 
    @include size($thumb-width $thumb-height); 
 

 
    background: $thumb-background; 
 
    border-radius: $thumb-radius; 
 
    border: $thumb-border; 
 
    position: relative; 
 
    
 
    } 
 
    &:active::-webkit-slider-thumb { 
 
    
 
    transform: scale(2); 
 
    } 
 
    &::-moz-range-progress { 
 
    height: $slider-height; 
 
    background: $background-filled-slider; 
 
    border: 0; 
 
    margin-top: 0; 
 
    } 
 

 
    &::-ms-track { 
 
    background: transparent; 
 
    border: 0; 
 
    border-color: transparent; 
 
    border-radius: 0; 
 
    border-width: 0; 
 
    color: transparent; 
 
    height: $slider-height; 
 
    margin-top: 10px; 
 
    width: $slider-width; 
 
    } 
 
    
 
    &::-ms-thumb { 
 
    @include size($thumb-width $thumb-height); 
 

 
    background: $thumb-background; 
 
    border-radius: $thumb-radius; 
 
    border: $thumb-border; 
 
    } 
 

 
    &::-ms-fill-lower { 
 
    background: $background-filled-slider; 
 
    border-radius: 0; 
 
    } 
 

 
    &::-ms-fill-upper { 
 
    background: $background-slider; 
 
    border-radius: 0; 
 
    } 
 

 
    &::-ms-tooltip { 
 
    display: none; 
 
    } 
 
}

<div> 
 
    <input type="range" min="0" max="100" value="40"/> 
 
</div>

這裏是 Codepen鏈接：

https://codepen.io/anon/pen/qPpRJp

您還可以編輯Codepen

Answer 1

這就是你想要的。如果你想要更多的修飾，去看看這裏的文檔https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

/* Special styling for WebKit/Blink */ 
 
input[type=range] { 
 
    -webkit-appearance: none; 
 
} 
 

 
input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    border: 10; 
 
    height: 15px; 
 
    width: 15px; 
 
    border-radius: 50%; 
 
    background: #3399cc; 
 
    cursor: pointer; 
 
    margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
 
    transition : all .3s; 
 
    border:0; 
 
    
 
} 
 
input[type=range]:hover::-webkit-slider-thumb{ 
 
box-shadow: 0px 0px 0px 4px rgba(51, 153, 204, 0.49); 
 
} 
 

 
input[type=range]::-webkit-slider-runnable-track { 
 
    width: 100%; 
 
    height: 4px; 
 
    cursor: pointer; 
 
    background: #3071a9; 
 
}

<div> 
 
    <input type="range" min="0" max="100" value="40"/> 
 
</div>