css布局实现游戏手柄点击按钮换背景色动画效果代码-html代码-BFW代码库

css布局实现游戏手柄点击按钮换背景色动画效果代码

代码语言：html

代码描述：css布局实现游戏手柄点击按钮换背景色动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
     :root {
	--green:#B5E27C;
	--blue:#6AC3D5;
	--light-green:#95DD62;
	--grey:#DBD1C7;
	--pink:#D9BCCD;
	--yellow:#DFD379;
	--red:#D2636E;
	--brown:#9B7188;
	--dark:#53243D;
	--rgbap:rgba(0,0,0,0.2);
	--rgbab:rgba(255,255,255,0.5);
	--stroke:6px solid #53243D;
	--radius:50%
}
input {
	display:none
}
body {
	height:100%;
	overflow:hidden
}
button,label {
	cursor:pointer;
	outline:0
}
button:active {
	transform:scale(.9)
}
.center {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%)
}
.joystick {
	width:573px;
	height:261px;
	transform-origin:center
}
.left-hand,.right-hand {
	background-color:var(--grey);
	border-radius:var(--radius);
	width:261px;
	height:261px;
	border:var(--stroke);
	position:absolute;
	top:0;
	z-index:;
	box-shadow:inset 0 -6px var(--rgbap)
}
.right-hand {
	right:0
}
.body-control {
	background-color:var(--grey);
	border-top:var(--stroke);
	z-index:9;
	position:absolute;
	width:315px;
	height:233px;
	transform:translatex(-50%);
	left:50%;
	top:0;
	clip-path:polygon(0 0,100% 0,71% 100%,29% 100%);
	text-align:center;
	box-shadow:inset 0 -6px var(--rgbap)
}
.stroke-base {
	position:absolute;
	background-color:var(--dark);
	top:238px;
	z-index:-1;
	width:315px;
	height:7px;
	transform:translatex(-50%);
	left:50%
}
.controler {
	border-radius:var(--radius);
	background-color:var(--pink);
	border:var(--stroke);
	position:fixed;
	z-index:99;
	box-shadow:0 6px var(--rgbap),inset 0 6px var(--rgbab)
}
.left-hand .controler {
	width:163px;
	height:163px;
	left:47px;
	top:49px;
	animation:scale 2s cubic-bezier(.89,.2,0,1.03)
}
.left-hand .controler button {
	border:.........完整代码请登录后点击上方下载按钮下载查看