纯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,.........完整代码请登录后点击上方下载按钮下载查看