js实现滚动滚轮开关效果代码-html代码-BFW代码库

js实现滚动滚轮开关效果代码

代码语言：html

代码描述：js实现滚动滚轮开关效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
:root {
	--color-bg: Khaki;
	--color-gear: #222;
}
html {
	height: 100%;
	display: grid;
	place-items: center;
	background: var(--color-bg);
	overflow: hidden;
}

body {
	position: relative;
}

#gear {
	width: 150px;
	height: 150px;
	background-color: var(--color-gear);
	background-image: radial-gradient(
			circle at 10px 10px,
			var(--color-bg) 30px,
			transparent 30px
		),
		radial-gradient(
			circle at center -15px,
			var(--color-bg) 30px,
			transparent 30px
		),
		radial-gradient(circle at 140px 10px, var(--color-bg) 30px, transparent 30px),
		radial-gradient(
			circle at -15px center,
			var(--color-bg) 30px,
			transparent 30px
		),
		radial-gradient(
			circle at center center,
			var(--color-bg) 30px,
			transparent 30px
		),
		radial-gradient(
			circle at 165px center,
			var(--color-bg) 30px,
			transparent 30px
		),
		radial-gradient(circle at left top, var(--color-bg) 30px, transparent 30px),
		radial-gradient(circle at 10px 140px, var(--color-bg) 30px, transparent 30px),
		radial-gradient(
			circle at center 165px,
			var(--color-bg) 30px,
			transparent 30px
		),
		radial-gradient(circle at 140px 140px, var(--color-bg) 30px, transparent 30px);
	border-radius: 50%;
	transition: background-color 1s;
	/* 	filter:drop-shadow(0 0 20px #efefef); */
}

#gearbox {
	width: 200px;
	height: 90px;
	background: radial-gradient(circle, silver 20px, transparent 20px), black;
	position: absolute;
	left: -25px;
	top: 30px;
	border-radius: 30px;
	transform: rotate(25deg);
	z-index: 1;
	cursor: pointer;
}
#gearbox:before {
	content: "";
	width: 150vw;
	height: 10px;
	background: linear-gradient(to bottom, #111, #222, #111);
	position: absolute;
	top: 40px;
	left: -50vw;
}
#gearbox:after {
	content: "\00D7";
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, #7.........完整代码请登录后点击上方下载按钮下载查看