纯css实现三维立体圆球操纵杆交互效果-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：纯css实现三维立体圆球操纵杆交互效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
/*--------------- COLORS ---------------------*/
/*---------------------------------------------*/
html {
  min-height: 100%;
}

body {
  background: radial-gradient(at 25% 25%, #f2f2f2 0%, #d9d9d9 100%);
  min-height: 100%;
}

.joystick {
  background: radial-gradient(at 75% 75%, #f2f2f2 0%, #d9d9d9 100%);
  box-shadow: 0 -5px 5px rgba(255, 255, 255, 0.1), 0 5px 5px rgba(255, 255, 255, 0.05), inset 0 5px 5px rgba(0, 0, 0, 0.02), inset 0 -5px 5px rgba(255, 255, 255, 0.05);
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.joystick__ball {
  background: radial-gradient(at 25% 25%, #f2f2f2 0%, #d9d9d9 100%);
  position: absolute;
  height: 70%;
  width: 70%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective: 1000px;
  box-shadow: inset -5px -10px 40px rgba(0, 0, 0, 0.05), inset 0px 0px 10px rgba(0, 0, 0, 0.3), inset 0px 0px 5px rgba(0, 0, 0, 0.5), inset 0px 0px 3px 1px rgba(0, 0, 0, 0.51), 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.joystick__zero {
  position: absolute;
  z-index: 4;
  height: 30%;
  width: 30%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.joystick__stick {
  background: radial-gradient(at 50% 75%, #f2f2f2 0%, #d9d9d9 100%);
  box-shadow: inset 5px 5px 10px rgba(255, 255, 255, 0.3), inset -5px -5px 10px rgba(0, 0, 0, 0.15), 0 2px 10px -5px rgba(0, 0, 0, 0.7), 0 4px 20px -10px rgba(0, 0, 0, 0.2), -50px 0 40px -20px rgba(0, 0, 0, 0.2), 50px 50px 40px -20px rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 2;
  height: 50%;
  width: 50%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -25% -25%;
  transition: 200ms ease all;
}
.joystick__stick:before {
  content: '';
  background: #fff;
  position: absolute;
  top: 10px;
  left: 49px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  box-shadow: 0 2px 3px #000, 39px 40px #fff, 39px 42px 3px #000, 0px 80px #fff, 0px 82px 3px #000, -39px 40px #fff, -39px 42px 3px #000;
  opacity: 0.15;
}
.joystick__stick:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  margin: -25% -25%;
  border-radius: 50%;
  box-shadow: -5px -5px 20px -10px;
  filter: blur(5px);
  opacity: 0.4;
}
.joystick__hover {
  position: absolute;
  z-index: 3;
  width: 12%;
  height: 50%;
  left: 50%;
  margin-left: -6%;
  transform-origin: 50% 100%;
}
.joystick__hover.hover-1 {
  transform: rotate(0deg);
}
.joystick__hover.hover-1:hover ~ .joystick__stick, .joystick__hover.hover-1:focus ~ .joystick__stick {
  transform: translate(0%, -50%) rotateX(-25deg) rotateY(0deg);
  box-shadow: inset 0px -12.5px 10px rgba(255, 255, 255, 0.3), inset 0px 12.5px 10px rgba(0, 0, 0, 0.15), 0 2px 10px -5px rgba(0, 0, 0, 0.7), 0 4px 20px -10px rgba(0, 0, 0, 0.2), -25px 0 40px -20px rgba(0, 0, 0, 0.2), 25px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-1:hover ~ .joystick__stick:after, .joystick__hover.hover-1:focus ~ .joystick__stick:after {
  box-shadow: 0px 12.5px 20px -10px;
}
.joystick__hover.hover-1:hover ~ .led-1, .joystick__hover.hover-1:focus ~ .led-1 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-1, .joystick__hover.hover-1:focus ~ .led-1 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-2, .joystick__hover.hover-1:focus ~ .led-2 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-28, .joystick__hover.hover-1:focus ~ .led-28 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-3, .joystick__hover.hover-1:focus ~ .led-3 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-27, .joystick__hover.hover-1:focus ~ .led-27 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-4, .joystick__hover.hover-1:focus ~ .led-4 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-26, .joystick__hover.hover-1:focus ~ .led-26 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-5, .joystick__hover.hover-1:focus ~ .led-5 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-25, .joystick__hover.hover-1:focus ~ .led-25 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-6, .joystick__hover.hover-1:focus ~ .led-6 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-24, .joystick__hover.hover-1:focus ~ .led-24 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-1:hover ~ .led-23, .joystick__hover.hover-1:focus ~ .led-23 {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-1:hover ~ .led-22, .joystick__hover.hover-1:focus ~ .led-22 {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-1:hover ~ .led-7,
.joystick__hover.hover-1:hover ~ .led--5, .joystick__hover.hover-1:focus ~ .led-7,
.joystick__hover.hover-1:focus ~ .led--5 {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-1:hover ~ .led-8,
.joystick__hover.hover-1:hover ~ .led--6, .joystick__hover.hover-1:focus ~ .led-8,
.joystick__hover.hover-1:focus ~ .led--6 {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-2 {
  transform: rotate(12.8571429deg);
}
.joystick__hover.hover-2:hover ~ .joystick__stick, .joystick__hover.hover-2:focus ~ .joystick__stick {
  transform: translate(11.1260467343%, -48.7463956008%) rotateX(-24.3731978004deg) rotateY(-5.5630233671deg);
  box-shadow: inset 2.7815116836px -12.1865989002px 10px rgba(255, 255, 255, 0.3), inset -2.7815116836px 12.1865989002px 10px rgba(0, 0, 0, 0.15), 0 2px 10px -5px rgba(0, 0, 0, 0.7), 0 4px 20px -10px rgba(0, 0, 0, 0.2), -24.3731978004px 0 40px -20px rgba(0, 0, 0, 0.2), 24.3731978004px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-2:hover ~ .joystick__stick:after, .joystick__hover.hover-2:focus ~ .joystick__stick:after {
  box-shadow: -2.7815116836px 12.1865989002px 20px -10px;
}
.joystick__hover.hover-2:hover ~ .led-2, .joystick__hover.hover-2:focus ~ .led-2 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-2, .joystick__hover.hover-2:focus ~ .led-2 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-3, .joystick__hover.hover-2:focus ~ .led-3 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-1, .joystick__hover.hover-2:focus ~ .led-1 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-4, .joystick__hover.hover-2:focus ~ .led-4 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-28, .joystick__hover.hover-2:focus ~ .led-28 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-5, .joystick__hover.hover-2:focus ~ .led-5 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-27, .joystick__hover.hover-2:focus ~ .led-27 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-6, .joystick__hover.hover-2:focus ~ .led-6 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-26, .joystick__hover.hover-2:focus ~ .led-26 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-7, .joystick__hover.hover-2:focus ~ .led-7 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-25, .joystick__hover.hover-2:focus ~ .led-25 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-2:hover ~ .led-24, .joystick__hover.hover-2:focus ~ .led-24 {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-2:hover ~ .led-23, .joystick__hover.hover-2:focus ~ .led-23 {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-2:hover ~ .led-8,
.joystick__hover.hover-2:hover ~ .led--4, .joystick__hover.hover-2:focus ~ .led-8,
.joystick__hover.hover-2:focus ~ .led--4 {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-2:hover ~ .led-9,
.joystick__hover.hover-2:hover ~ .led--5, .joystick__hover.hover-2:focus ~ .led-9,
.joystick__hover.hover-2:focus ~ .led--5 {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-3 {
  transform: rotate(25.7142858deg);
}
.joystick__hover.hover-3:hover ~ .joystick__stick, .joystick__hover.hover-3:focus ~ .joystick__stick {
  transform: translate(21.6941870233%, -45.0484433627%) rotateX(-22.5242216813deg) rotateY(-10.8470935116deg);
  box-shadow: inset 5.4235467558px -11.2621108407px 10px rgba(255, 255, 255, 0.3), inset -5.4235467558px 11.2621108407px 10px rgba(0, 0, 0, 0.15), 0 2px 10px -5px rgba(0, 0, 0, 0.7), 0 4px 20px -10px rgba(0, 0, 0, 0.2), -22.5242216813px 0 40px -20px rgba(0, 0, 0, 0.2), 22.5242216813px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-3:hover ~ .joystick__stick:after, .joystick__hover.hover-3:focus ~ .joystick__stick:after {
  box-shadow: -5.4235467558px 11.2621108407px 20px -10px;
}
.joystick__hover.hover-3:hover ~ .led-3, .joystick__hover.hover-3:focus ~ .led-3 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-3, .joystick__hover.hover-3:focus ~ .led-3 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-4, .joystick__hover.hover-3:focus ~ .led-4 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-2, .joystick__hover.hover-3:focus ~ .led-2 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-5, .joystick__hover.hover-3:focus ~ .led-5 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-1, .joystick__hover.hover-3:focus ~ .led-1 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-6, .joystick__hover.hover-3:focus ~ .led-6 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-28, .joystick__hover.hover-3:focus ~ .led-28 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-7, .joystick__hover.hover-3:focus ~ .led-7 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-27, .joystick__hover.hover-3:focus ~ .led-27 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-8, .joystick__hover.hover-3:focus ~ .led-8 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-26, .joystick__hover.hover-3:focus ~ .led-26 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-3:hover ~ .led-25, .joystick__hover.hover-3:focus ~ .led-25 {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-3:hover ~ .led-24, .joystick__hover.hover-3:focus ~ .led-24 {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-3:hover ~ .led-9,
.joystick__hover.hover-3:hover ~ .led--3, .joystick__hover.hover-3:focus ~ .led-9,
.joystick__hover.hover-3:focus ~ .led--3 {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-3:hover ~ .led-10,
.joystick__hover.hover-3:hover ~ .led--4, .joystick__hover.hover-3:focus ~ .led-10,
.joystick__hover.hover-3:focus ~ .led--4 {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-4 {
  transform: rotate(38.5714287deg);
}
.joystick__hover.hover-4:hover ~ .joystick__stick, .joystick__hover.hover-4:focus ~ .joystick__stick {
  transform: translate(31.1744901807%, -39.0915740534%) rotateX(-19.5457870267deg) rotateY(-15.5872450903deg);
  box-shadow: inset 7.7936225452px -9.7728935134px 10px rgba(255, 255, 255, 0.3), inset -7.7936225452px 9.7728935134px 10px rgba(0, 0, 0, 0.15), 0 2px 10px -5px rgba(0, 0, 0, 0.7), 0 4px 20px -10px rgba(0, 0, 0, 0.2), -19.5457870267px 0 40px -20px rgba(0, 0, 0, 0.2), 19.5457870267px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-4:hover ~ .joystick__stick:after, .joystick__hover.hover-4:focus ~ .joystick__stick:after {
  box-shadow: -7.7936225452px 9.7728935134px 20px -10px;
}
.joystick__hover.hover-4:hover ~ .led-4, .joystick__hover.hover-4:focus ~ .led-4 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-4, .joystick__hover.hover-4:focus ~ .led-4 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-5, .joystick__hover.hover-4:focus ~ .led-5 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-3, .joystick__hover.hover-4:focus ~ .led-3 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-6, .joystick__hover.hover-4:focus ~ .led-6 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-2, .joystick__hover.hover-4:focus ~ .led-2 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-7, .joystick__hover.hover-4:focus ~ .led-7 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-1, .joystick__hover.hover-4:focus ~ .led-1 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-8, .joystick__hover.hover-4:focus ~ .led-8 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-28, .joystick__hover.hover-4:focus ~ .led-28 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-9, .joystick__hover.hover-4:focus ~ .led-9 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-27, .joystick__hover.hover-4:focus ~ .led-27 {
  background: #fff;
  box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-4:hover ~ .led-26, .joystick__hover.hover-4:focus ~ .led-26 {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-4:hover ~ .led-25, .joystick__hover.hover-4:focus ~ .led-25 {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-4:hover ~ .led-10,
.joystick__hover.hover-4:hover ~ .led--2, .joystick__hover.hover-4:focus ~ .led-10,
.joystick__hover.hover-4:focus ~ .led--2 {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-4:hover ~ .led-11,
.joystick__hover.hover-4:hover ~ .led--3, .joystick__hover.hover-4:focus ~ .led-11,
.joystick__hover.hover-4:focus ~ .led--3 {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-5 {
  transform: rotate(51.4285716deg);
}
.joystick__hover.hover-5:hover ~ .joystick__stick, .joystick__hover.hover-5:focus ~ .joystick__stick {
  transform: translate(39.0915742.........完整代码请登录后点击上方下载按钮下载查看