div+css布局实现一个wii遥控器效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现一个wii遥控器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { font-size: 40px; } body, button { font: 1em/1.5 sans-serif; } body { height: 100vh; display: grid; padding: 1em; place-items: center; } /* Main, buttons */ .wr { background: linear-gradient(0deg,#b0b1b5,#d7d7d7); border-radius: 0.9em; box-shadow: 0 0 0 0.05em #b2b1b5 inset, 0 0.1em 0 #d7d7d7 inset, 0.1em 0 0.1em #b2b1b5 inset, -0.1em 0 0.1em #b2b1b5 inset, 0 -0.2em 0.2em #9b9ea2 inset, 0.1em 0 0 #d7d7d7 inset, 0 0.15em 0 #fcfbfc inset; position: relative; width: 4.9em; height: 20em; } .wr__inner { background: linear-gradient(-35deg,#cdced1 55.5%,#cdced100 57.5%), linear-gradient(45deg,#d8d9db 75%,#f9f9fb); border-radius: 0.6em; box-shadow: 0.05em 0.05em 0.05em #fcfbfc inset; display: flex; justify-content: center; align-content: flex-start; flex-wrap: wrap; margin: 0.3em 0.15em; padding: 0.16em 0.5em; width: 4.6em; height: 19.4em; } .wr__btn, .wr__d-pad-btn, .wr__d-pad-center { position: relative; } .wr__btn { border-radius: 50%; color: #9c9c9e; transform-style: preserve-3d; text-transform: uppercase; -webkit-appearance: none; appearance: none; } .wr__btn:nth-of-type(1) { margin: 0.1rem 2.65rem 0.7rem 0.15rem; } .wr__btn:nth-of-type(4) { margin: 0 0.6rem; } .wr__btn--lg { background: radial-gradient(50% 50% at 90% 90%,#fff,#fff0), linear-gradient(-40deg,#0002 49%,#0000 51%), radial-gradient(50% 50% at 25% 25%,#fff,#fff0); box-shadow: 0 0 0 0.025rem #5c5d61 inset, 0 0 0 0.075rem #a2a7ab inset, 0.05rem 0.05rem 0 0.05rem #77787a inset, 0.15rem 0.15rem 0.2rem #b6b8bb; color: #828589; font-size: 0.6em; margin: 0 1.025rem 2.175rem 1.025rem; width: 1.55rem; height: 1.55rem; } .wr__btn--md { background: linear-gradient(-30deg,#fff0 55%,#fff 80%); box-shadow: 0 0 0 0.025rem #5c5d61 inset, 0 0 0.05rem 0.075rem #0000002f inset, -0.05rem -0.05rem 0.05rem #ffffff7f, 0.1rem 0.1rem 0.15rem #b6b8bb; color: #828589; font-size: 0.45em; margin: 0 1.26rem 0.68rem 1.26rem; width: 1.08rem; height: 1.08rem; } .wr__btn--sm, .wr__btn--sm-flat { font-size: 0.3em; width: 0.8rem; height: 0.8rem; } .wr__btn--sm { background: linear-gradient(-30deg,#fff0 50%,#fff 75%); box-shadow: 0 0 0 0.025rem #5c5d61 inset, 0 0 0.05rem 0.05rem #0000003f inset, -0.05rem -0.05rem 0.1rem #ffffff7f, 0.1rem 0.1rem 0.15rem #b6b8bb; } .wr__btn--sm.wr__btn--no-drop { box-shadow: 0 0 0 0.025rem #5c5d61 inset, 0 0 0.05rem 0.05rem #0000003f inset, -0.05rem -0.05rem 0.1rem #ffffff4f; } .wr__btn--sm-flat { background: #e8e6e8; box-shadow: 0 0 0 0.05rem #5c5d61 inset, 0.075rem 0.075rem 0.05rem #ffffff inset, -0.075rem -0.075rem 0.05rem #b1b7be inset; } .wr__btn-outside-label { font-weight: bold; line-height: 1; position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); } .wr__btn-ring { background: linear-gradient(-45deg,#dedfe4 40%,#7c7f81); border-radius: inherit; box-shadow: 0.1em 0.1em 0.15em #fffa; display: block; position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; transform: translateZ(-1px); } .wr__d-pad { display: grid; grid-template-columns: 0.85em 0.75em 0.85em; grid-template-rows: 0.85em 0.75em 0.85em; margin: 0 0.575em 1em 0.575em; width: 2.45em; height: 2.45em; } .wr__d-pad-btn:before { background: #8b9095; content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0.05em; height: 0.45em; } .wr__d-pad-btn:nth-child(5n + 1) { width: 0.75em; height: 0.85em; } .wr__d-pad-btn:nth-child(2n + 1) { grid-column: 2; } .wr__d-pad-btn:nth-child(2n + 2):nth-child(-2n + 4):before { transform: translate(-50%,-50%) rotate(90deg); } .wr__d-pad-btn:nth-child(2n), .wr__d-pad-center { grid-row: 2; } .wr__d-pad-btn:nth-child(2n) { width: 0.85em; height: 0.75em; } .wr__d-pad-btn:nth-child(2n):before { top: calc(50% - 0.05em); } .wr__d-pad-btn:nth-child(-n + 3) { background: #d0d1d3; } .wr__d-pad-btn:nth-child(n + 4) { background: #dddfe0; } .wr__d-pad-btn:nth-child(1) { border-radius: 0.1em 0.1em 0 0; box-shadow: 0 0 0 0.05em #636365, 0 0.05em 0.1em #f4f5f8 inset, 0.1em 0 0.1em #f4f5f8 inset, -0.1em 0 0.1em #91949c inset; } .wr__d-pad-btn:nth-child(1):before { top: calc(50% + 0.05em); } .wr__d-pad-btn:nth-child(2) { border-radius: 0.1em 0 0 0.1em; box-shadow: 0 0 0 0.05em #636365, 0 -0.1em 0.1em #91949c inset, 0 0.1em 0.1em #f4f5f8 inset, 0.1em 0 0.2em #f4f5f8 inset, 0.1em 0.1em 0.1em #9c9ea8; } .wr__d-pad-btn:nth-child(2):before { left: calc(50% + 0.05em); } .wr__d-pad-btn:nth-child(4) { border-radius: 0 0.1em 0.1em 0; box-shadow: 0 0 0 0.05em #636365, 0 0.1em 0.1em #f4f5f8 inset, -0.05em -0.1em 0.1em #9c9ea8 inset, 0.1em 0.1em 0.1em #9c9ea8; } .wr__d-pad-btn:nth-child(4):before { left: calc(50% - 0.05em); } .wr__d-pad-btn:nth-child(5) { border-radius: 0 0 0.1em 0.1em; box-shadow: 0 0 0 0.05em #636365, 0 -0.05em 0.1em #9c9ea8 inset, -0.05em -0.05em 0.1em #9c9ea8 inset, 0.1em 0.1em 0.1em #9c9ea8; grid-row: 3; } .wr__d-pad-btn:nth-child(5):before { top: calc(50% - 0.05em); } .wr__d-pad-center { background: linear-gradient(-45deg,#dddfe0 25%,#d0d1d3 75%); margin: -0.05em 0 0 -0.05em; overflow: hidden; width: 0.85em; height: 0.85em; z-index: 1; } .wr__d-pad-center-tl, .wr__d-pad-center-tr, .wr__d-pad-center-br, .wr__d-pad-center-bl { background: #636365; position: absolute; width: 100%; height: 100%; } .wr__d-pad-center-tl, .wr__d-pad-center-tr { bottom: calc(100% - 0.05em); } .wr__d-pad-center-br, .wr__d-pad-center-bl { top: calc(100% - 0.05em); } .wr__d-pad-center-tl, .wr__d-pad-center-bl { right: calc(100% - 0.05em); } .wr__d-pad-center-tr, .wr__d-pad-center-br { left: calc(100% - 0.05em); } .wr__d-pad-center-tl { box-shadow: 0.1em 0.1em 0.1em #f4f5f8; } .wr__d-pad-center-tr { box-shadow: 0 0.1em 0.1em #f4f5f8, -0.1em 0 0.1em #91949c; } .wr__d-pad-center-br { box-shadow: 0 -0.05em 0.1em #9c9ea8, -0.05em -0.1em 0.1em #9c9ea8; } .wr__d-pad-center-bl { box-shadow: 0 -0.1em 0.1em #91949c; } .wr__speakers { display: flex; align-content: space-between; flex-wrap: wrap; margin: 1.1em 1.35em 1.05em 1.35em; width: 0.9em; height: 2.04em; } .wr__speaker-hole { background: #000; border-radius: 50%; box-shadow: 0.05em 0.05em 0 #fff; width: 0.2em; height: 0.2em; } .wr__speaker-hole:nth-child(3n + 2) { margin: 0 0.15em; } .wr__speaker-hole:nth-child(-n + 3), .wr__speaker-hole:nth-child(n + 16) { transform: scale(0.625); } .wr__speaker-hole:nth-child(n + 4):nth-child(-n + 6), .wr__speaker-hole:nth-child(n + 13):nth-child(-n + 15) { transform: scale(0.875); } .wr__lights { display: flex; justify-content: space-between; margin: 0.05em auto 0.45em auto; width: 2.9em; } .wr__light { background: #696b70; position: relative; width: 0.24em; height: 0.24em; } .wr__light--on { background: radial-gradient(#31c3e9,#696b70); box-shadow: 0 0 0.05em 0.05em #31c3e97f; } .wr__light-dot { background: #eeeef2; border-radius: 50%; box-shadow: 0.05em 0.05em 0.05em #afb1b5; position: absolute; top: -0.25em; left: 50%; width: 0.1em; height: 0.1em; transform: translateX(-50%); } .wr__light:nth-child(2n) .wr__light-dot:nth-child(1) { transform: translateX(-150%); } .wr__light:nth-child(2n) .wr__light-dot:nth-child(2) { transform: translateX(50%); } .wr__light:nth-child(2n) .wr__light-dot:nth-child(3) { transform: translateX(-350%); } .wr__light:nth-child(2n) .wr__light-dot:nth-child(4) { transform: translateX(250%); } .wr__light:nth-child(2n + 1) .wr__light-dot:nth-child(2) { transform: translateX(-250%); } .wr__light:nth-child(2n + 1) .wr__light-dot:nth-child(3) { transform: translateX(150%); } ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0