发火愤怒程度滑动取值器动态效果-html代码-BFW代码库

发火愤怒程度滑动取值器动态效果

代码语言：html

代码描述：发火愤怒程度滑动取值器动态效果

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


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

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oswald&amp;display=swap&amp;text=0123456789'>
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--bg: #d8d8d8;
	--fg: #171717;
	--fgT: #17171700;
	--rageLight: #f13d17;
	--rageDark: #962417;
	--track: #969696;
	--animDur: 0.2s;
	--transDur: 0.1s;
	font-size: calc(32px + (48 - 32)*(100vw - 320px)/(2560 - 320));
}
body, input {
	color: var(--fg);
	font: 1em/1.5 "Oswald", sans-serif;
}
body {
	background: var(--bg);
	display: flex;
	height: 100vh;
}
form {
	margin: auto;
	width: 8.5em;
}
.rage {
	position: relative;
}
.rage__input, .rage__track, .rage__flame-area {
	width: 100%;
}
.rage__input {
	background: transparent;
	display: block;
	outline: transparent;
	margin: 2.25em 0;
	height: 0.75em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.rage__input::-webkit-slider-thumb {
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	width: 1.5em;
	height: 1.5em;
	-webkit-appearance: none;
	appearance: none;
}
.rage__input::-moz-range-thumb {
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	width: 1.5em;
	height: 1.5em;
}
.rage__input::-moz-focus-outer {
	border: 0;
}

/* .rage__input--active is for keyboard interaction */
.rage__input:active + .rage__track,
.rage__input--active + .rage__track {
	background: var(--rageDark);
}
.rage__input:active ~ .rage__face,
.rage__input--active ~ .rage__face,
.rage__input:active.........完整代码请登录后点击上方下载按钮下载查看