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

纯css布局实现xbox游戏手柄效果

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