纯css布局实现xbox游戏手柄效果-html代码-BFW代码库

代码语言：html

代码描述：纯css布局实现xbox游戏手柄效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
    background-color: pink;
}

@import url('https://fonts.googleapis.com/css2?family=Muli:wght@900&display=swap');

/* container */
.xbox-container {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 500px;
    height: 500px;
    font-family: 'Muli', sans-serif;
   
}


/* control shape */
.main {
    position: absolute;
    top: 50px;
   
    border-bottom: 300px solid white;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 400px;
    border-radius: 25px;
   z-index: 1;
   
    
  }

  .main1 {
    position: absolute;
    top: 50px;
   
    border-bottom: 300px solid white;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 400px;
    border-radius: 25px;
    box-shadow: -1em -1em 1.5em rgba(0, 0, 0, 0.6), 0 0 0 1px #aaa;
    z-index: 0;

    
  }

.side1{
    position: absolute;
    width: 200px;
    height: 400px;
    background: white;
    border-radius: 200px / 100px;
    transform: rotate(20deg);
    top: 40px;
    left: -100px;
    box-shadow: -1em -1em 1.5em rgba(0, 0, 0, 0.6), 0 0 0 1px #aaa, inset 40px 0px 20px rgba(0,0,0,0.3);
    border-top: 18px solid black;
  }


  .side2{
    position: absolute;
    width: 200px;
    height: 400px;
    background: white;
    border-radius: 200px / 100px;
    transform: rotate(-20deg);
    top: 40px;
    right: -90px;
    box-shadow: -1em -1em 1.5em rgba(0, 0, 0, 0.6), 0 0 0 1px #aaa, inset 40px 0px 20px rgba(0,0,0,0.2);
    border-top: 22px solid black;
  }


  .indent {
    position: absolute;
        border-bottom: 60px solid rgba(204, 204, 204,0.3);

        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        height: 0;
        width: 200px;
        transform: rotate(180deg);
        left: 60px;
        top: 15px;
        box-shadow:  inset 40px 0px 20px rgba(0,0,0,0.3);
      
      }

      .long {
        position: absolute;
        width: 420px;
        height: 14px;
        background-color: black;
        left: -10px;
        border-radius: 50px;
    }
  

   

      /* buttons */

      .buttony {
        width: 40px;
        height: 40px;
        background: rgb(29, 29, 29);
        border-radius: 50%;
        position: absolute;
       top: 60px;
       right: -30px;
       box-shadow:
		-0.2em -0.125em 0.125em rgba(0, 0, 0, 0.4), 
		0 0 0 0.04em rgba(0, 0, 0, 0.5), 
		0.02em 0.02em 0.02em rgba(0, 0, 0, 0.4) inset, 
		-0.05em -0.05em 0.02em rgba(255, 255, 255, 0.8) inset;
        text-align: center;
        color: yellow;
        font-size: 1.5rem;
        line-height: 40px;
        background: linear-gradient(90deg,black  0%, rgb(48, 47, 47) 50%, rgb(15, 15, 15) 100%);;
      }

      .buttonx {
        width: 40px;
        height: 40px;
        background: rgb(29, 29, 29);
        border-radius: 50%;
        position: absolute;
       top: 100px;
       right: 10px;
       box-shadow:
		-0.2em -0.125em 0.125em rgba(0, 0, 0, 0.4), 
		0 0 0 0.04em rgba(0, 0, 0, 0.5), 
		0.02em 0.02em 0.02em rgba(0, 0, 0, 0.4) inset, 
		-0.05em -0.05em 0.02em rgba(255, 255, 255, 0.8) inset;
        text-align: center;
        color: rgb(0, 153, 255);
        font-size: 1.5rem;
        line-height: 40px;
        background: linear-gradient(90deg,black  0%, rgb(48, 47, 47) 50%, rgb(15, 15, 15) 100%);;
      }

      .buttona {
        width: 40px;
        height: 40px;
        background: rgb(29, 29, 29);
        border-radius: 50%;
        position: absolute;
       top: 140px;
       right: -30px;
       box-shadow:
		-0.2em -0.125em 0.125em rgba(0, 0, 0, 0.4), 
		0 0 0 0.04em rgba(0, 0, 0, 0.5), 
		0.02em 0.02em 0.02em rgba(0, 0, 0, 0.4) inset, 
		-0.05em -0.05em 0.02em rgba(255, 255, 255, 0.8) inset;
        text-align: center;
        color: lime;
        font-size: 1.5rem;
        line-height: 40px;
        background: linear-gradient(90deg,black  0%, rgb(48, 47, 47) 50%, rgb(15, 15, 15) 100%);;
      }

      .buttonb {
        width: 40px;
        height: 40px;
        background: rgb(29, 29, 29);
        border-radius: 50%;
        position: absolute;
       top: 100px;
       right: -70px;
       box-shadow:
		-0.2em -0.125em 0.125em rgba(0, 0, 0, 0.4), 
		0 0 0 0.04em rgba(0, 0, 0, 0.5), 
		0.02em 0.02em 0.02em rgba(0, 0, 0, 0.4) inset, 
		-0.05em -0.05em 0.02em rgba(255, 255, 255, 0.8) inset;
        text-align: center;
        color: red;
        font-size: 1.5rem;
        line-height: 40px;
        background: linear-gradient(90deg,black  0%, rgb(48, 47, 47) 50%, rgb(15, 15, 15) 100%);;
      }


      
.button1 {
  width: 30px;
  height: 30px;
  background:white;;
  border-radius: 50%;
  position: absolute;
 top: 90px;
 left: 120px;
 box-shadow:
  -0.3em -0.125em 0.125em rgba(0, 0, 0, 0.4), 
  0 0 0 0.04em rgba(0, 0, 0, 0.5), 
  0.02em 0.02em 0.02em rgba(0, 0, 0, 0.4) inset, 
  -0.05em -0.05em 0.02em rgba(255, 255, 255, 0.8) inset;
  text-align: center;
  color: black;;
  font-size: 1rem;
  line-height: 30px;
}



.button2 {
  width: 30px;
  height: 30px;
  background:white;;
  border-radius: 50%;
  position: absolute;
 top: 90px;
 left: 220px;
 box-shadow:
  -0.3em -0.125em 0.125em rgba(0, 0, 0, 0.4), 
  0 0 0 0.04em rgba(0, 0, 0, 0.5), 
  0.02em 0.02em 0.02em rgba(0, 0, 0, 0.4) inset, 
.........完整代码请登录后点击上方下载按钮下载查看