css+js实现range石头拖动后返回原位动画效果代码
代码语言:html
所属分类:拖放
代码描述:css+js实现range石头拖动后返回原位动画效果代码
代码标签: css js range 石头 拖动 返回 原位 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700"> <style> :root { --rotation-angle: 0deg; } body { background-color: hsl(35, 50%, 80%); } #container { display: flex; justify-content: center; align-items: center; height: 80vh; } #sliderValue { text-align: center; font-family: Roboto, sans-serif; font-size: 0.5em; font-weight:700; } /* Slider */ input[type="range"]::-ms-track { cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type="range"]:focus { outline: none; } .slider { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; background-color: transparent; width: 200px; height: 38px; border: none; background: none; border-bottom: 8px solid #000; outline: none; z-index: 999; } .slider::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; background-color: transparent; width: 40px; height: 40px; margin-left: -5px; cursor: pointer; background-color: transparent; transform-origin: 50% 50%; transform: rotate(var(--rotation-angle)); background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="12.7,0.3 0.8,9.6 4.7,34.7 28,39.4 37.7,30.7 38.7,7.6 "/></svg>'); background-size: cover; } .slider::-moz-range-thumb { -webkit-appearance: none; appearance: none; box-shadow: none; background-color: transparent; width: 40px; height: 40px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0