css布局实现一个gameboy游戏机效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个gameboy游戏机效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } :root { --light-yellow: #FDC262; --orange: #FCA417; --dark-orange: #F96C07; --dark-orange-shadow: #F75605; --screen: #838F6F; --darkGray: #514447; --darkGray2: #66494A; --red: #FF2020; } body { background: #D14657; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .wrapper { width: 306px; height: 498px; background: var(--light-yellow); border-radius: 12px 12px 50px 12px; border: 6px solid #000; box-shadow: 29px 20px 0px #9F3642; position: relative; overflow: hidden; margin: 50px 0; } .wrapper:before { content: ""; position: absolute; top:0px; bottom:0px; left: 10px; right: 10px; background: var(--orange); border-radius: 10px 10px 20px 10px; z-index: 2; } .wrapper:after { content: ""; position: absolute; top:0px; bottom:10px; left: 10px; right: 0px; background: var(--dark-orange); z-index: 1; border-radius: 10px 0px 0 10px; } .bottomCornerAngle { position: absolute; bottom: 6px; right: 10px; border-bottom: 85px solid var(--dark-orange); border-left: 85px solid transparent; z-index: 3; } .bottomShadow { position: absolute; bottom: -14px; height: 20px; left: 10px; border-radius: 7px; background: var(--dark-orange); right: 0; z-index: 4; } .topStripes { position: absolute; z-index: 5; width: 100%; height: 5px; top: 23px; background: #000; } .topStripes:before { content: ''; position: absolute; background: #000; width: 4px; height: 30px; left: 27px; top: -25px; } .topStripes:after { content: ''; position: absolute; background: #000; width: 4px; height: 30px; right: 27px; top: -25px; } .screenWrapper { position: absolute; top: 50px; width: 222px; height: 177px; left: 36px; border: 4px solid #000; background: var(--darkGray); border-radius: 5px 5px 20px 5px; z-index: 6; } .screen { position: absolute; top: 25px; left: 37px; background: var(--screen); border: 4px solid #000; width: 140px; height: 130px; } .screen:before { content: ''; position: absolute; background: #000; height: 4px; left: -24px; width: 100px; top: -17px; border-radius: 2px; } .screen:after { content: ''; position: absolute; background: #000; height: 4px; right: -28px; width: 34px; top: -17px; border-radius: 2px; } .linesBelowScreen { position: absolute; height: 4px; left: 36px; width: 223px; top: 249px; z-index: 6; } .horizontal_1 { position: absolute; left: 0; width: 84px; height: 4px; border-radius: 2px; background: #000; } .horizontal_2 { position: absolute; right: 0; width: 84px; height: 4px; border-radius: 2px; background: #000; } .vertical_base { position: absolute; border-radius: 2px; background: #000; width: 4px; height: 12px; top: -4px; } .vertical_1 { left: 94px; } .vertical_2 { left: 104px; } .vertical_3 { left: 114px; } .vertical_4 { left: 124px; } .stripesRow { display: flex; position: absolute; bottom: 45px; right: 9px; z-index: 6; z-index: 6; transform: rotate(-45deg); } .stripesRow .stripe { border-radius: 6px;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0