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