纯css实现三维立体圆球操纵杆交互效果
代码语言：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.0915742167%, -31.174489976%) rotateX(-15.587244988deg) rotateY(-19.5457871083deg);
box-shadow: inset 9.7728935542px -7.793622494px 10px rgba(255, 255, 255, 0.3), inset -9.7728935542px 7.793622494px 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), -15.587244988px 0 40px -20px rgba(0, 0, 0, 0.2), 15.587244988px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-5:hover ~ .joystick__stick:after, .joystick__hover.hover-5:focus ~ .joystick__stick:after {
box-shadow: -9.7728935542px 7.793622494px 20px -10px;
}
.joystick__hover.hover-5:hover ~ .led-5, .joystick__hover.hover-5:focus ~ .led-5 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-5, .joystick__hover.hover-5:focus ~ .led-5 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-6, .joystick__hover.hover-5:focus ~ .led-6 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-4, .joystick__hover.hover-5:focus ~ .led-4 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-7, .joystick__hover.hover-5:focus ~ .led-7 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-3, .joystick__hover.hover-5:focus ~ .led-3 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-8, .joystick__hover.hover-5:focus ~ .led-8 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-2, .joystick__hover.hover-5:focus ~ .led-2 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-9, .joystick__hover.hover-5:focus ~ .led-9 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-1, .joystick__hover.hover-5:focus ~ .led-1 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-10, .joystick__hover.hover-5:focus ~ .led-10 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-28, .joystick__hover.hover-5:focus ~ .led-28 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-5:hover ~ .led-27, .joystick__hover.hover-5:focus ~ .led-27 {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-5:hover ~ .led-26, .joystick__hover.hover-5:focus ~ .led-26 {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-5:hover ~ .led-11,
.joystick__hover.hover-5:hover ~ .led--1, .joystick__hover.hover-5:focus ~ .led-11,
.joystick__hover.hover-5:focus ~ .led--1 {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-5:hover ~ .led-12,
.joystick__hover.hover-5:hover ~ .led--2, .joystick__hover.hover-5:focus ~ .led-12,
.joystick__hover.hover-5:focus ~ .led--2 {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-6 {
transform: rotate(64.2857145deg);
}
.joystick__hover.hover-6:hover ~ .joystick__stick, .joystick__hover.hover-6:focus ~ .joystick__stick {
transform: translate(45.0484434763%, -21.6941867874%) rotateX(-10.8470933937deg) rotateY(-22.5242217381deg);
box-shadow: inset 11.2621108691px -5.4235466968px 10px rgba(255, 255, 255, 0.3), inset -11.2621108691px 5.4235466968px 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), -10.8470933937px 0 40px -20px rgba(0, 0, 0, 0.2), 10.8470933937px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-6:hover ~ .joystick__stick:after, .joystick__hover.hover-6:focus ~ .joystick__stick:after {
box-shadow: -11.2621108691px 5.4235466968px 20px -10px;
}
.joystick__hover.hover-6:hover ~ .led-6, .joystick__hover.hover-6:focus ~ .led-6 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-6, .joystick__hover.hover-6:focus ~ .led-6 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-7, .joystick__hover.hover-6:focus ~ .led-7 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-5, .joystick__hover.hover-6:focus ~ .led-5 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-8, .joystick__hover.hover-6:focus ~ .led-8 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-4, .joystick__hover.hover-6:focus ~ .led-4 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-9, .joystick__hover.hover-6:focus ~ .led-9 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-3, .joystick__hover.hover-6:focus ~ .led-3 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-10, .joystick__hover.hover-6:focus ~ .led-10 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-2, .joystick__hover.hover-6:focus ~ .led-2 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-11, .joystick__hover.hover-6:focus ~ .led-11 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-1, .joystick__hover.hover-6:focus ~ .led-1 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-6:hover ~ .led-12,
.joystick__hover.hover-6:hover ~ .led-0, .joystick__hover.hover-6:focus ~ .led-12,
.joystick__hover.hover-6:focus ~ .led-0 {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-6:hover ~ .led-13,
.joystick__hover.hover-6:hover ~ .led--1, .joystick__hover.hover-6:focus ~ .led-13,
.joystick__hover.hover-6:focus ~ .led--1 {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-7 {
transform: rotate(77.1428574deg);
}
.joystick__hover.hover-7:hover ~ .joystick__stick, .joystick__hover.hover-7:focus ~ .joystick__stick {
transform: translate(48.746395659%, -11.126046479%) rotateX(-5.5630232395deg) rotateY(-24.3731978295deg);
box-shadow: inset 12.1865989148px -2.7815116198px 10px rgba(255, 255, 255, 0.3), inset -12.1865989148px 2.7815116198px 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), -5.5630232395px 0 40px -20px rgba(0, 0, 0, 0.2), 5.5630232395px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-7:hover ~ .joystick__stick:after, .joystick__hover.hover-7:focus ~ .joystick__stick:after {
box-shadow: -12.1865989148px 2.7815116198px 20px -10px;
}
.joystick__hover.hover-7:hover ~ .led-7, .joystick__hover.hover-7:focus ~ .led-7 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-7, .joystick__hover.hover-7:focus ~ .led-7 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-8, .joystick__hover.hover-7:focus ~ .led-8 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-6, .joystick__hover.hover-7:focus ~ .led-6 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-9, .joystick__hover.hover-7:focus ~ .led-9 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-5, .joystick__hover.hover-7:focus ~ .led-5 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-10, .joystick__hover.hover-7:focus ~ .led-10 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-4, .joystick__hover.hover-7:focus ~ .led-4 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-11, .joystick__hover.hover-7:focus ~ .led-11 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-3, .joystick__hover.hover-7:focus ~ .led-3 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-12, .joystick__hover.hover-7:focus ~ .led-12 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-2, .joystick__hover.hover-7:focus ~ .led-2 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-7:hover ~ .led-13,
.joystick__hover.hover-7:hover ~ .led-1, .joystick__hover.hover-7:focus ~ .led-13,
.joystick__hover.hover-7:focus ~ .led-1 {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-7:hover ~ .led-14,
.joystick__hover.hover-7:hover ~ .led-0, .joystick__hover.hover-7:focus ~ .led-14,
.joystick__hover.hover-7:focus ~ .led-0 {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-8 {
transform: rotate(90.0000003deg);
}
.joystick__hover.hover-8:hover ~ .joystick__stick, .joystick__hover.hover-8:focus ~ .joystick__stick {
transform: translate(50%, 0.0000002618%) rotateX(0.0000001309deg) rotateY(-25deg);
box-shadow: inset 12.5px 0.0000000655px 10px rgba(255, 255, 255, 0.3), inset -12.5px -0.0000000655px 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), 0.0000001309px 0 40px -20px rgba(0, 0, 0, 0.2), -0.0000001309px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-8:hover ~ .joystick__stick:after, .joystick__hover.hover-8:focus ~ .joystick__stick:after {
box-shadow: -12.5px -0.0000000655px 20px -10px;
}
.joystick__hover.hover-8:hover ~ .led-8, .joystick__hover.hover-8:focus ~ .led-8 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-8, .joystick__hover.hover-8:focus ~ .led-8 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-9, .joystick__hover.hover-8:focus ~ .led-9 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-7, .joystick__hover.hover-8:focus ~ .led-7 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-10, .joystick__hover.hover-8:focus ~ .led-10 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-6, .joystick__hover.hover-8:focus ~ .led-6 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-11, .joystick__hover.hover-8:focus ~ .led-11 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-5, .joystick__hover.hover-8:focus ~ .led-5 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-12, .joystick__hover.hover-8:focus ~ .led-12 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-4, .joystick__hover.hover-8:focus ~ .led-4 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-13, .joystick__hover.hover-8:focus ~ .led-13 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-3, .joystick__hover.hover-8:focus ~ .led-3 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-8:hover ~ .led-14,
.joystick__hover.hover-8:hover ~ .led-2, .joystick__hover.hover-8:focus ~ .led-14,
.joystick__hover.hover-8:focus ~ .led-2 {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-8:hover ~ .led-15,
.joystick__hover.hover-8:hover ~ .led-1, .joystick__hover.hover-8:focus ~ .led-15,
.joystick__hover.hover-8:focus ~ .led-1 {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-9 {
transform: rotate(102.8571432deg);
}
.joystick__hover.hover-9:hover ~ .joystick__stick, .joystick__hover.hover-9:focus ~ .joystick__stick {
transform: translate(48.7463955425%, 11.1260469895%) rotateX(5.5630234948deg) rotateY(-24.3731977713deg);
box-shadow: inset 12.1865988856px 2.7815117474px 10px rgba(255, 255, 255, 0.3), inset -12.1865988856px -2.7815117474px 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), 5.5630234948px 0 40px -20px rgba(0, 0, 0, 0.2), -5.5630234948px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-9:hover ~ .joystick__stick:after, .joystick__hover.hover-9:focus ~ .joystick__stick:after {
box-shadow: -12.1865988856px -2.7815117474px 20px -10px;
}
.joystick__hover.hover-9:hover ~ .led-9, .joystick__hover.hover-9:focus ~ .led-9 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-9, .joystick__hover.hover-9:focus ~ .led-9 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-10, .joystick__hover.hover-9:focus ~ .led-10 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-8, .joystick__hover.hover-9:focus ~ .led-8 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-11, .joystick__hover.hover-9:focus ~ .led-11 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-7, .joystick__hover.hover-9:focus ~ .led-7 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-12, .joystick__hover.hover-9:focus ~ .led-12 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-6, .joystick__hover.hover-9:focus ~ .led-6 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-13, .joystick__hover.hover-9:focus ~ .led-13 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-5, .joystick__hover.hover-9:focus ~ .led-5 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-14, .joystick__hover.hover-9:focus ~ .led-14 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-4, .joystick__hover.hover-9:focus ~ .led-4 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-9:hover ~ .led-15,
.joystick__hover.hover-9:hover ~ .led-3, .joystick__hover.hover-9:focus ~ .led-15,
.joystick__hover.hover-9:focus ~ .led-3 {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-9:hover ~ .led-16,
.joystick__hover.hover-9:hover ~ .led-2, .joystick__hover.hover-9:focus ~ .led-16,
.joystick__hover.hover-9:focus ~ .led-2 {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-10 {
transform: rotate(115.7142861deg);
}
.joystick__hover.hover-10:hover ~ .joystick__stick, .joystick__hover.hover-10:focus ~ .joystick__stick {
transform: translate(45.0484432491%, 21.6941872591%) rotateX(10.8470936296deg) rotateY(-22.5242216245deg);
box-shadow: inset 11.2621108123px 5.4235468148px 10px rgba(255, 255, 255, 0.3), inset -11.2621108123px -5.4235468148px 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), 10.8470936296px 0 40px -20px rgba(0, 0, 0, 0.2), -10.8470936296px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-10:hover ~ .joystick__stick:after, .joystick__hover.hover-10:focus ~ .joystick__stick:after {
box-shadow: -11.2621108123px -5.4235468148px 20px -10px;
}
.joystick__hover.hover-10:hover ~ .led-10, .joystick__hover.hover-10:focus ~ .led-10 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-10, .joystick__hover.hover-10:focus ~ .led-10 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-11, .joystick__hover.hover-10:focus ~ .led-11 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-9, .joystick__hover.hover-10:focus ~ .led-9 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-12, .joystick__hover.hover-10:focus ~ .led-12 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-8, .joystick__hover.hover-10:focus ~ .led-8 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-13, .joystick__hover.hover-10:focus ~ .led-13 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-7, .joystick__hover.hover-10:focus ~ .led-7 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-14, .joystick__hover.hover-10:focus ~ .led-14 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-6, .joystick__hover.hover-10:focus ~ .led-6 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-15, .joystick__hover.hover-10:focus ~ .led-15 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-5, .joystick__hover.hover-10:focus ~ .led-5 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-10:hover ~ .led-16,
.joystick__hover.hover-10:hover ~ .led-4, .joystick__hover.hover-10:focus ~ .led-16,
.joystick__hover.hover-10:focus ~ .led-4 {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-10:hover ~ .led-17,
.joystick__hover.hover-10:hover ~ .led-3, .joystick__hover.hover-10:focus ~ .led-17,
.joystick__hover.hover-10:focus ~ .led-3 {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-11 {
transform: rotate(128.571429deg);
}
.joystick__hover.hover-11:hover ~ .joystick__stick, .joystick__hover.hover-11:focus ~ .joystick__stick {
transform: translate(39.0915738902%, 31.1744903853%) rotateX(15.5872451927deg) rotateY(-19.5457869451deg);
box-shadow: inset 9.7728934726px 7.7936225963px 10px rgba(255, 255, 255, 0.3), inset -9.7728934726px -7.7936225963px 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), 15.5872451927px 0 40px -20px rgba(0, 0, 0, 0.2), -15.5872451927px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-11:hover ~ .joystick__stick:after, .joystick__hover.hover-11:focus ~ .joystick__stick:after {
box-shadow: -9.7728934726px -7.7936225963px 20px -10px;
}
.joystick__hover.hover-11:hover ~ .led-11, .joystick__hover.hover-11:focus ~ .led-11 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-11, .joystick__hover.hover-11:focus ~ .led-11 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-12, .joystick__hover.hover-11:focus ~ .led-12 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-10, .joystick__hover.hover-11:focus ~ .led-10 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-13, .joystick__hover.hover-11:focus ~ .led-13 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-9, .joystick__hover.hover-11:focus ~ .led-9 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-14, .joystick__hover.hover-11:focus ~ .led-14 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-8, .joystick__hover.hover-11:focus ~ .led-8 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-15, .joystick__hover.hover-11:focus ~ .led-15 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-7, .joystick__hover.hover-11:focus ~ .led-7 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-16, .joystick__hover.hover-11:focus ~ .led-16 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-6, .joystick__hover.hover-11:focus ~ .led-6 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-11:hover ~ .led-17,
.joystick__hover.hover-11:hover ~ .led-5, .joystick__hover.hover-11:focus ~ .led-17,
.joystick__hover.hover-11:focus ~ .led-5 {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-11:hover ~ .led-18,
.joystick__hover.hover-11:hover ~ .led-4, .joystick__hover.hover-11:focus ~ .led-18,
.joystick__hover.hover-11:focus ~ .led-4 {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-12 {
transform: rotate(141.4285719deg);
}
.joystick__hover.hover-12:hover ~ .joystick__stick, .joystick__hover.hover-12:focus ~ .joystick__stick {
transform: translate(31.1744897713%, 39.0915743799%) rotateX(19.5457871899deg) rotateY(-15.5872448856deg);
box-shadow: inset 7.7936224428px 9.772893595px 10px rgba(255, 255, 255, 0.3), inset -7.7936224428px -9.772893595px 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.5457871899px 0 40px -20px rgba(0, 0, 0, 0.2), -19.5457871899px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-12:hover ~ .joystick__stick:after, .joystick__hover.hover-12:focus ~ .joystick__stick:after {
box-shadow: -7.7936224428px -9.772893595px 20px -10px;
}
.joystick__hover.hover-12:hover ~ .led-12, .joystick__hover.hover-12:focus ~ .led-12 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-12, .joystick__hover.hover-12:focus ~ .led-12 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-13, .joystick__hover.hover-12:focus ~ .led-13 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-11, .joystick__hover.hover-12:focus ~ .led-11 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-14, .joystick__hover.hover-12:focus ~ .led-14 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-10, .joystick__hover.hover-12:focus ~ .led-10 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-15, .joystick__hover.hover-12:focus ~ .led-15 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-9, .joystick__hover.hover-12:focus ~ .led-9 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-16, .joystick__hover.hover-12:focus ~ .led-16 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-8, .joystick__hover.hover-12:focus ~ .led-8 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-17, .joystick__hover.hover-12:focus ~ .led-17 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-7, .joystick__hover.hover-12:focus ~ .led-7 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-12:hover ~ .led-18,
.joystick__hover.hover-12:hover ~ .led-6, .joystick__hover.hover-12:focus ~ .led-18,
.joystick__hover.hover-12:focus ~ .led-6 {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-12:hover ~ .led-19,
.joystick__hover.hover-12:hover ~ .led-5, .joystick__hover.hover-12:focus ~ .led-19,
.joystick__hover.hover-12:focus ~ .led-5 {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-13 {
transform: rotate(154.2857148deg);
}
.joystick__hover.hover-13:hover ~ .joystick__stick, .joystick__hover.hover-13:focus ~ .joystick__stick {
transform: translate(21.6941865515%, 45.0484435897%) rotateX(22.5242217949deg) rotateY(-10.8470932758deg);
box-shadow: inset 5.4235466379px 11.2621108974px 10px rgba(255, 255, 255, 0.3), inset -5.4235466379px -11.2621108974px 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.5242217949px 0 40px -20px rgba(0, 0, 0, 0.2), -22.5242217949px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-13:hover ~ .joystick__stick:after, .joystick__hover.hover-13:focus ~ .joystick__stick:after {
box-shadow: -5.4235466379px -11.2621108974px 20px -10px;
}
.joystick__hover.hover-13:hover ~ .led-13, .joystick__hover.hover-13:focus ~ .led-13 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-13, .joystick__hover.hover-13:focus ~ .led-13 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-14, .joystick__hover.hover-13:focus ~ .led-14 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-12, .joystick__hover.hover-13:focus ~ .led-12 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-15, .joystick__hover.hover-13:focus ~ .led-15 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-11, .joystick__hover.hover-13:focus ~ .led-11 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-16, .joystick__hover.hover-13:focus ~ .led-16 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-10, .joystick__hover.hover-13:focus ~ .led-10 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-17, .joystick__hover.hover-13:focus ~ .led-17 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-9, .joystick__hover.hover-13:focus ~ .led-9 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-18, .joystick__hover.hover-13:focus ~ .led-18 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-8, .joystick__hover.hover-13:focus ~ .led-8 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-13:hover ~ .led-19,
.joystick__hover.hover-13:hover ~ .led-7, .joystick__hover.hover-13:focus ~ .led-19,
.joystick__hover.hover-13:focus ~ .led-7 {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-13:hover ~ .led-20,
.joystick__hover.hover-13:hover ~ .led-6, .joystick__hover.hover-13:focus ~ .led-20,
.joystick__hover.hover-13:focus ~ .led-6 {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-14 {
transform: rotate(167.1428577deg);
}
.joystick__hover.hover-14:hover ~ .joystick__stick, .joystick__hover.hover-14:focus ~ .joystick__stick {
transform: translate(11.1260462238%, 48.7463957165%) rotateX(24.3731978583deg) rotateY(-5.5630231119deg);
box-shadow: inset 2.781511556px 12.1865989291px 10px rgba(255, 255, 255, 0.3), inset -2.781511556px -12.1865989291px 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.3731978583px 0 40px -20px rgba(0, 0, 0, 0.2), -24.3731978583px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-14:hover ~ .joystick__stick:after, .joystick__hover.hover-14:focus ~ .joystick__stick:after {
box-shadow: -2.781511556px -12.1865989291px 20px -10px;
}
.joystick__hover.hover-14:hover ~ .led-14, .joystick__hover.hover-14:focus ~ .led-14 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-14, .joystick__hover.hover-14:focus ~ .led-14 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-15, .joystick__hover.hover-14:focus ~ .led-15 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-13, .joystick__hover.hover-14:focus ~ .led-13 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-16, .joystick__hover.hover-14:focus ~ .led-16 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-12, .joystick__hover.hover-14:focus ~ .led-12 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-17, .joystick__hover.hover-14:focus ~ .led-17 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-11, .joystick__hover.hover-14:focus ~ .led-11 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-18, .joystick__hover.hover-14:focus ~ .led-18 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-10, .joystick__hover.hover-14:focus ~ .led-10 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-19, .joystick__hover.hover-14:focus ~ .led-19 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-9, .joystick__hover.hover-14:focus ~ .led-9 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-14:hover ~ .led-20,
.joystick__hover.hover-14:hover ~ .led-8, .joystick__hover.hover-14:focus ~ .led-20,
.joystick__hover.hover-14:focus ~ .led-8 {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.joystick__hover.hover-14:hover ~ .led-21,
.joystick__hover.hover-14:hover ~ .led-7, .joystick__hover.hover-14:focus ~ .led-21,
.joystick__hover.hover-14:focus ~ .led-7 {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
.joystick__hover.hover-15 {
transform: rotate(180.0000006deg);
}
.joystick__hover.hover-15:hover ~ .joystick__stick, .joystick__hover.hover-15:focus ~ .joystick__stick {
transform: translate(-0.0000005236%, 49.9999999962%) rotateX(24.9999999981deg) rotateY(0.0000002618deg);
box-shadow: inset -0.0000001309px 12.4999999991px 10px rgba(255, 255, 255, 0.3), inset 0.0000001309px -12.4999999991px 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.9999999981px 0 40px -20px rgba(0, 0, 0, 0.2), -24.9999999981px 50px 40px -20px rgba(0, 0, 0, 0.2);
}
.joystick__hover.hover-15:hover ~ .joystick__stick:after, .joystick__hover.hover-15:focus ~ .joystick__stick:after {
box-shadow: 0.0000001309px -12.4999999991px 20px -10px;
}
.joystick__hover.hover-15:hover ~ .led-15, .joystick__hover.hover-15:focus ~ .led-15 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-15:hover ~ .led-15, .joystick__hover.hover-15:focus ~ .led-15 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-15:hover ~ .led-16, .joystick__hover.hover-15:focus ~ .led-16 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-15:hover ~ .led-14, .joystick__hover.hover-15:focus ~ .led-14 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-15:hover ~ .led-17, .joystick__hover.hover-15:focus ~ .led-17 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-15:hover ~ .led-13, .joystick__hover.hover-15:focus ~ .led-13 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-15:hover ~ .led-18, .joystick__hover.hover-15:focus ~ .led-18 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-15:hover ~ .led-12, .joystick__hover.hover-15:focus ~ .led-12 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-15:hover ~ .led-19, .joystick__hover.hover-15:focus ~ .led-19 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.joystick__hover.hover-15:hover ~ .led-11, .joystick__hover.hover-15:focus ~ .led-11 {
background: #fff;
box-shadow: 0 0 5px #fff;
}
.j.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0