纯css布局实现经典游戏机效果
代码语言:html
所属分类:游戏
代码描述:纯css布局实现经典游戏机效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* #e45037 red button #db9946 button background*/ body { background-color: #f5eadf; } .container { margin:auto; top:0; right:0; bottom:0; left:0; width:100vw; height:100vh; } .body { background-color: #fec742; height: 450px; width: 300px; border-radius: 10px 10px 40px 10px; border: 5px solid #2b1d0e; box-shadow: 5px 6px 20px #111; position: absolute; top: 40px; left: 300px; } .top-divide { background-color: #2b1d0e; width: 300px; height: 5px; position: absolute; top: 70px; left: 305px; } .top-divide-left { background-color: #2b1d0e; width: 5px; height: 30px; position: absolute; top: 45px; left: 330px; } .top-divide-right { background-color: #2b1d0e; width: 5px; height: 30px; position: absolute; top: 45px; left: 575px; } .speaker { background-color: #db9946; width: 50px; height: 8px; border-radius: 30px; border: 4px solid #2b1d0e; position: absolute; top: 50px; left: 345px; } .screen-divide { background-color: #2b1d0e; width: 110px; height: 4px; border-radius: 2px; position: absolute; top: 95px; left: 340px; } .screen-divide1 { background-color: #2b1d0e; width: 40px; height: 4px; border-radius: 2px; position: absolute; top: 95px; left: 530px; } .signal { background-color: white; width: 7px; height: 7px; border-radius: 50%; border: 2px solid #2b1d0e; position: absolute; top: 160px; left: 343px; } .screen-border { background-color: #5b5b5b; width: 250px; height: 150px; border: 4px solid #2b1d0e; border-radius: 10px 10px 40px 10px; position: absolute; top: 85px; left: 330px; } .screen{ background-color: #dae9c2; width: 180px; height: 110px; border: 4px solid #2b1d0e; position: absolute; top: 15px; left: 30px; } .button-background1 { background-color: #db9946; width: 100px; height: 50px; border-radius: 30px; border: 4px solid #2b1d0e; position: absolute; top: 310px; left: 480px; transform: rotate(-25deg); } .round-button1 { background-color: #e45037; width: 30px; height: 30px; border-radius: 50%; border: 4px solid #2b1d0e; position: absolute; left: 10px; top: 5px; } .round-button2 { background-color: #e45037; width: 30px; height: 30px; border-radius: 50%; border: 4px solid #2b1d0e; position: absolute; left: 50px; top: 5px; } .button-background2 { background-color: #db9946; width: 90px; height: 90px; border-radius: 50%; border: 4px solid #2b1d0e; position: absolute; top: 280px; left: 330px; } .cross-button { background: #5b5b5b; border: 4px solid #3d3d3d; height: 70px; position: relative; width: 20px; top: 7px; left: 30px; } .cross-button:after { background: #5b5b5b; border: 4px solid #3d3d3d; content: ""; height: 20px; left: -30px; position: absolute; top: 21px; width: 70px; } .center { background: #5b5b5b; width: 17px; height: 17px; border-radius: 50%; border: 4px solid #3d3d3d; position: absolute; top: 34px; left: 30px; } .bottom-button1 { background-color: #5b5b5b; width: 35px; height: 10px; border-radius: 30px; border: 4px solid #2b1d0e; position: absolute; top: 420px; left: 400px; transform: rotate(-30deg); } .bottom-button2 { background-color: #5b5b5b; width: 35px; height: 10px; border-radius: 30px; border: 4px solid #2b1d0e; position: absolute; top: 420px; left: 450px; transform: rotate(-30deg); } .speaker1 { background-color: #2b1d0e; width: 7px; height: 35px; border-radius: 5px; position: relative; top: 435px; left: 560px; transform: rotate(-35deg); } .speaker1:after { background-color: #2b1d0e; content: ""; width: 7px; height: 35px; border-radius: 5px; position: absolute; left: 12px; } .speaker2 { background-color: #2b1d0e; width: 7px; height: 35px; border-radius: 5px; position: relative; top: 415px; left: 539px; transform: rotate(-35deg); } .speaker2:after { background-color: #2b1d0e; content: ""; width: 7px; height: 35px; border-radius: 5px; position: absolute; left: 12px; } .bottom-speaker { background-colo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0