css+js实现拖动滑条改变温度颜色效果代码
代码语言:html
所属分类:拖放
代码描述:css+js实现拖动滑条改变温度颜色效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap'> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); body { height: 100vh; margin: 0; display: grid; place-items: center; background-color: #1d1d1d; } #container { width: 450px; height: 250px; background: rgb(255, 255, 255); border-radius: 20px; /*box-shadow: 0px 0px 10px 20px black;*/ padding: 20px; display: grid; place-items: center; } #value { font-size: 50px; font-family: "Roboto", sans-serif; text-align: center; color: white; } .slider { -webkit-appearance: none; width: 100%; height: 25px; background: white; outline: none; -webkit-transition: 0.2s; transition: opacity 0.2s; border-radius: 20px; padding: 2px; } .slider:hover { /* ... */ } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; border-radius: 25px; width: 25px; height: 25px; background: #1d1d1d; cursor: pointer; } .slider::-moz-range-thumb { border-radius: 25px; width: 25px; height: 25px; background: #1d1d1d; cursor: pointer; } .note { position: absolute; left: 25%; color: white; font-family: "Roboto", sans-serif; font-size: 20px; } .switch { position: absolute; bottom: 20px; right: 20px; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .toggle { border-radius: 34px; position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s; } .toggle:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 50%; } input:focus + .toggle { box-shadow: 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0