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

代码语言：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:var(--stroke);
	background-color:var(--brown);
	width:32px;
	height:32px;
	position:absolute;
	z-index:9
}
.left-hand .controler button:after {
	content:"◂";
	font-size:30px;
	font-family:sans-serif;
	color:var(--dark);
	position:absolute;
	line-height:0
}
.left-hand .controler button.left:after {
	left:5px;
	top:8px
}
.left-hand .controler button.right:after {
	right:5px;
	top:12px;
	transform:rotate(180deg)
}
.left-hand .controler button.top:after {
	left:6px;
	top:12px;
	transform:rotate(90deg)
}
.left-hand .controler button.bottom:after {
	right:4px;
	bottom:12px;
	transform:rotate(-90deg)
}
.left-hand .controler button.left {
	border-right:none!important;
	box-shadow:inset 0 4px var(--rgbab),inset 0 -4px var(--rgbap);
	top:50%;
	margin-top:-16px;
	left:38px
}
.left-hand .controler button.top {
	border-bottom:none!important;
	box-shadow:inset 0 4px var(--rgbab);
	left:50%;
	margin-left:-16px;
	top:38px
}
.left-hand .controler button.right {
	border-left:none!important;
	box-shadow:inset 0 4px var(--rgbab),inset 0 -4px var(--rgbap);
	top:50%;
	margin-top:-16px;
	right:38px
}
.left-hand .controler button.bottom {
	border-top:none!important;
	box-shadow:inset 0 -4px var(--rgbap);
	left:50%;
	margin-left:-16px;
	bottom:38px
}
.left-hand .controler:after,.left-hand .controler:before {
	content:"";
	width:30px;
	height:30px;
	background-color:var(--brown);
	position:absolute;
	top:50%;
	left:50%;
	margin:-15px;
	z-index:1
}
.left-hand .controler:before {
	border-radius:var(--radius);
	border:3px solid var(--dark);
	z-index:99;
	box-sizing:border-box;
	box-shadow:inset 4px 0 var(--rgbab);
	transform:scale(0.8)
}
.body-control button {
	width:18px;
	height:42px;
	border-radius:100px;
	border:var(--stroke);
	padding:0;
	transform:rotate(45deg) translatex(-50%);
	margin:20px 10px;
	background-color:var(--brown);
	box-shadow:4px 0 var(--rgbap),inset 2px 0 var(--rgbab);
	position:relative;
	top:50%;
	animation:starts 1s cubic-bezier(.89,.2,0,1.03);
	animation-fill-mode:forwards
}
.body-control button:first-child {
	animation-delay:.2s;
	opacity:0
}
.body-control:after,.body-control:before {
	content:"";
	position:absolute;
	width:120px;
	border:2px dashed var(--dark);
	left:45%;
	transform:translatex(-50%);
	top:30px
}
.body-control:before {
	top:50px;
	border-style:solid
}
.right-hand .controler {
	width:205px;
	height:205px;
	right:22px;
	top:22px;
	animation:scale 2s cubic-bezier(.89,.2,0,1.03) .2s;
	animation-fill-mode:forwards;
	transform:scale(0)
}
.right-hand .controler .actions {
	background-color:var(--grey);
	border-radius:100px;
	border:var(--stroke);
	box-shadow:0 6px var(--rgbap),inset 0 6px var(--rgbab);
	text-align:center;
	transform:rotate(-45deg);
	position:absolute;
	padding:5px 5px 1px;
	left:30px;
	top:42px
}
.right-hand .controler .actions.group2 {
	left:auto;
	top:auto;
	right:30px;
	bottom:42px
}
.right-hand .controler .actions label {
	width:32px;
	height:32px;
	border-radius:var(--radius);
	border:3px solid var(--dark);
	box-shadow:0 6px var(--rgbap),inset 0 6px var(--rgbab);
	transform:scale(0);
	animation-fill-mode:forwards;
	display:inline-block;
	box-sizing:border-box
}
.right-hand .controler .actions label:first-child {
	margin-right:25px
}
.actions .green {
	background-color:var(--green);
	animation:scale 2s cubic-bezier(.89,.2,0,1.03) .5s
}
.actions .blue {
	background-color:var(--blue);
	animation:scale 2s cubic-bezier(.89,.2,0,1.03) .7s
}
.actions .yellow {
	background-color:var(--yellow);
.........完整代码请登录后点击上方下载按钮下载查看