css实现的一个游戏机效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现的一个游戏机效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { background-color: #a1d6e6; margin-top: 50px; margin-bottom: 50px; } .arcade-container { position: relative; display: flex; justify-content: center; z-index: 0; } .arcade-container .arcade-wall { position: relative; } .arcade-container .arcade-wall .block-1 { position: relative; overflow: hidden; width: 220px; height: 85px; } .arcade-container .arcade-wall .block-1::after { content: ""; position: absolute; width: 260px; height: 100px; left: 6px; top: 28px; background: #0096b6; border-top: 8px solid #264042; border-left: 4px solid #264042; border-top-left-radius: 12px; transform: rotate(-19deg); } .arcade-container .arcade-wall .block-2 { position: relative; width: 220px; height: 50px; background: #0096b6; border-left: 8px solid #264042; } .arcade-container .arcade-wall .block-2::before { content: ""; position: absolute; border-left: 8px solid #264042; height: 10px; top: -7px; left: -8px; border-radius: 2px; } .arcade-container .arcade-wall .block-2::after { content: ""; position: absolute; width: 30px; height: 50px; background: #0096b6; border-bottom: 8px solid #264042; border-left: 9px solid #264042; border-right: 9px solid #264042; transform: skew(-45deg); right: 15px; z-index: 1; } .arcade-container .arcade-wall .block-3 { position: relative; width: 220px; height: 180px; background-color: #0096b6; border-left: 8px solid #264042; } .arcade-container .arcade-wall .block-3::after { content: ""; position: absolute; width: 30px; height: 180px; background: #00b8e6; border-bottom: 8px solid #264042; border-left: 8px solid #264042; border-right: 8px solid #264042; right: 40px; z-index: 1; } .arcade-container .arcade-wall .block-4 { position: relative; width: 220px; height: 45px; background-color: #0096b6; border-left: 8px solid #264042; } .arcade-container .arcade-wall .block-4::after { content: ""; position: absolute; width: 30px; height: 45px; background: #00cff3; border-bottom: 8px solid #264042; border-left: 8px solid #264042; border-right: 8px solid #264042; right: 17px; transform: skew(45deg); z-index: 1; border-bottom-right-radius: 2px; } .arcade-container .arcade-wall .block-5 { position: relative; width: 220px; height: 95px; background-color: #0096b6; border-left: 8px solid #264042; } .arcade-container .arcade-wall .block-5::after { content: ""; position: absolute; width: 30px; height: 95px; background: #00b8e6; border-bottom: 8px solid #264042; border-left: 8px solid #264042; border-right: 8px solid #264042; right: -5px; z-index: 1; border-bottom-right-radius: 2px; } .arcade-container .arcade-wall .block-6 { position: relative; width: 220px; height: 25px; background-color: #0096b6; border-left: 8px solid #264042; } .arcade-container .arcade-wall .block-6::after { content: ""; position: absolute; width: 30px; height: 25px; background: #0096b6; border-bottom: 8px solid #264042; border-left: 9px solid #264042; border-right: 9px solid #264042; right: 8px; z-index: 1; transform: skew(-45deg); border-bottom-left-radius: 2px; } .arcade-container .arcade-wall .block-7 { position: relative; width: 220px; height: 195px; background-color: #0096b6; border-left: 8px solid #264042; border-bottom: 8px solid #264042; border-bottom-left-radius: 4px; } .arcade-container .arcade-wall .block-7::after { content: ""; position: absolute; width: 30px; height: 195px; background: #00b8e6; border-bottom: 8px solid #264042; border-left: 9px solid #264042; border-right: 9px solid #264042; right: 20px; z-index: 1; border-bottom-left-radius: 2px; } .arcade-container .arcade-wall.alt { margin-left: -250px; z-index: -1; } .arcade-container .arcade-wall.alt .block-2, .arcade-container .arcade-wall.alt .block-6 { background: linear-gradient(136deg, #0096b6 80%, rgba(0, 0, 0, 0) 75%); } .arcade-container .arcade-wall.alt .block-3, .arcade-container .arcade-wall.alt .block-7 { background: linear-gradient(90deg, #0096b6 80%, rgba(0, 0, 0, 0) 75%); } .arcade-container .arcade-wall.alt .block-4 { background: linear-gradient(45deg, #0096b6 80%, rgba(0, 0, 0, 0) 75%); } .arcade-container .arcade-wall.alt .block-5 { background: linear-gradient(90deg, #0096b6 90%, rgba(0, 0, 0, 0) 75%); } .arcade-container .arcade-wall.alt .block-2::before { content: ""; position: absolute; width: 25px; height: 5px; background-color: #264042; border-radius: 2.5px; z-index: 1; transform: rotate(-45deg) translate(110px, 120px); } .arcade-container .arcade-wall.alt .block-6::before { content: ""; position: absolute; width: 25px; height: 5px; background-color: #264042; border-radius: 2.5px; right: 32px; top: 3px; z-index: 1; transform: rotate(-45deg); } .arcade-container .arcade-mid { position: relative; } .arcade-container .arcade-mid .top .b1-cont { display: flex; position: relative; left: -20px; } .arcade-container .arcade-mid .top .b1-cont .border { position: relative; width: 22px; height: 85px; background: #00b8e6; border-top: 8px solid #264042; border-bottom: 8px solid #264042; } .arcade-container .arcade-mid .top .b1-cont .border.left { border-left: 8px solid #264042; border-top-left-radius: 10px; } .arcade-container .arcade-mid .top .b1-cont .border.right { border-right: 8px solid #264042; border-top-right-radius: 10px; } .arcade-container .arcade-mid .top .block-1 { position: relative; width: 300px; height: 85px; background: #00b8e6; background: linear-gradient(315deg, #00b8e6 30%, #41d1ee 30%, #41d1ee 70%, #00b8e6 70%); border: 8px solid #264042; box-shadow: inset -8px 8px #41d1ee; } .arcade-container .arcade-mid .top .block-1::after { content: ""; position: absolute; width: 150px; height: 13px; background: #264042; border-radius: 1px; left: 50%; top: 50%; transform: translate(-50%, -50%); } .arcade-container .arcade-mid .top .block-2 { position: relative; left: -20px; width: 250px; height: 40px; background: #284f5f; transform: skewX(-45deg); border-bottom: 8px solid #264042; border-right: 10px solid #264042; border-left: 10px solid #264042; } .arcade-container .arcade-mid .top .block-2::before, .arcade-container .arcade-mid .top .block-2::after { content: ""; position: absolute; left: -2px; width: 40px; height: 4px; background-color: #264042; border-top-right-radius: 3px; border-bottom-right-radius: 3px; transform: skewX(45deg); } .arcade-container .arcade-mid .top .block-2::before { top: 6px; width: 40px; height: 4px; } .arcade-container .arcade-mid .top .block-2::after { top: 15px; width: 80px; height: 4px; } .arcade-container .arcade-mid .screen { position: relative; left: -40px; width: 250px; height: 210px; background-color: #446068; background-image: radial-gradient(rgba(38, 64, 66, 0.7) 40%, transparent 40%), radial-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%); background-size: 730px 540px, 30px 30px; background-repeat: no-repeat; background-position: -310px -25px, 94% 39%; border: 8px solid #264042; border-top: none; border-left: none; } .arcade-container .arcade-mid .screen .pacman-container { overflow: hidden; position: absolute; width: 250px; height: 210px; display: flex; justify-content: center; align-items: center; opacity: 0.8; } .arcade-container .arcade-mid .screen .pacman-container::before { content: ""; width: 130px; height: 200px; position: absolute; right: 8px; top: 0; background-image: radial-gradient(gold 14%, transparent 11%); background-size: 100px 100px; background-repeat: repeat-x; background-position: 200px center; animation: move-dots 1.6s linear infinite; z-index: 1; } .arcade-container .arcade-mid .screen .pacman-container::after { content: ""; width: 13px; height: 13px; position: absolute; border-radius: 50%; background-color: #446068; top: 70px; left: 120px; z-index: 1; } .arcade-container .arcade-mid .screen .pacman { width: 100px; height: 100px; background-image: linear-gradient(90deg, yellow 50%, transparent 50%); border-radius: 50%; overflow: hidden; position: absolute; z-index: 1; } .arcade-container .arcade-mid .screen .pacman::after, .arcade-container .arcade-mid .screen .pacman::before { content: ""; width: 100px; height: 50px; position: absolute; left: 0; background-color: yellow; animation: eat 0.4s linear infinite alternate; } .arcade-container .arcade-mid .screen .pacman::after { top: 0; transform: rotate(-45deg); transform-origin: center bottom; } .arcade-container .arcade-mid .screen .pacman::before { top: 50px; transform: rotate(45deg); transform-origin: center top; } .arcade-container .arcade-mid .screen::before { content: ""; position: absolute; width: 70px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); top: 20px; right: 30px; transform: rotate(45deg); } .arcade-container .arcade-mid .mid .block-1 { position: relative; left: -20px; width: 250px; height: 40px; background: #366a7f; transform: skewX(45deg); border-bottom: 8px solid #264042; border-right: 10px solid #264042; border-left: 10px solid #264042; } .arcade-container .arcade-mid .mid .block-1 .joystick { position: absolute; left: 20%; transform: skewX(-45deg) translateY(-35px); width: 22px; height: 60px; background: #d6d6d6; border-radius: 10px; border: 8px solid #264042; box-shadow: inset 0 24px 2px -1px #979a9a; } .arcade-container .arcade-mid .mid .block-1 .joystick::before { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 8px solid #264042; top: -20px; left: 50%; transform: translatex(-50%) rotate(45deg); background-color: #ff5a59; background-image: radial-gradient(24px 16px, #ffa6a6, #ffa6a6 25%, transparent 25%), radial-gradient(7px 7px, #ffa6a6, #ffa6a6 25%, transparent 25%); background-size: 2.1em; background-position: -6px -5px, 3px 0px; background-repeat: no-repeat; } .arcade-container .arcade-mid .mid .block-1 .button { position: absolute; top: 2px; transform: skewX(-45deg); width: 30px; height: 25px; border-radius: 50%; border: 8px solid #264042; box-shadow: inset -2px 2px 5px -2px #fafafa; } .arcade-container .arcade-mid .mid .block-1 .button.yellow { right: 30%; background-color: #e5d33a; } .arcade-container .arcade-mid .mid .block-1 .button.red { right: 1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0