css+js实现sony psp游戏机手柄效果代码
代码语言:html
所属分类:布局界面
代码描述:css+js实现sony psp游戏机手柄效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: BioRhyme; src: url("//repo.bfw.wiki/bfwrepo/font/biorhyme.woff") format("woff"); font-display: swap; } @font-face { font-family: Plation; src: url("//repo.bfw.wiki/bfwrepo/font/plation.woff2") format("woff2"), url("//repo.bfw.wiki/bfwrepo/font/plation.woff") format("woff"); font-display: swap; } @font-face { font-family: "BTSEPS2"; src: url("//repo.bfw.wiki/bfwrepo/font/btseps2.woff2") format("woff2"), url("//repo.bfw.wiki/bfwrepo/font/btseps2.woff") format("woff"); font-display: swap; } body { background: #223; margin: 0; } .container { display: flex; justify-content: center; margin-top: 9em; } .created { background: url(//repo.bfw.wiki/bfwrepo/image/62bd155f1c952.png), linear-gradient(to bottom, #884ced, #ec1cce); background-size: 75px 75px, cover; background-repeat: no-repeat; position: absolute; top: 0; right: 0; width: 250px; height: 75px; display: flex; flex-direction: column; align-items: center; padding-left: 2em; } .created span, .created h2, .created p, .created a { font-family: Montserrat; margin: 0; } .created a, .created p, .created span { color: #fff; } .created h2 { font-weight: 700; transform: translate(0, -4px); } .created a { -webkit-text-decoration-color: rgba(255,255,255,0.4); text-decoration-color: rgba(255,255,255,0.4); } .created a:hover { color: #e6e82a; } </style> </head> <body > <div class="container"> <console-psp></console-psp> </div> <script > class PSPRoundButton extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } static get styles() { return (/* css */` :host { } span { border-top: 1px solid #222; border-left: 1px solid #333; border-radius: 40%; padding: 1px 6px; } `); } connectedCallback() { this.text = this.getAttribute("text"); this.render(); } render() { this.shadowRoot.innerHTML = /* html */` <style>${PSPRoundButton.styles}</style> <span>${this.text}</span> `; }} customElements.define("psp-round-button", PSPRoundButton); class PSPLeftContents extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } static get styles() { return (/* css */` :host { display: flex; flex-direction: column; width: 90%; height: 100%; transform: translateX(-5%); } .logo { font-family: "Plation"; font-size: 50px; display: flex; transform: translate(-5px, -5px) scale(0.35); } .p { color: #ccc; transform: skewY(20deg) translateZ(40px) translateX(-4px) translateY(-7px); position: relative; font-size: 60px; perspective: 2000px; z-index: 10; } .s { position: absolute; z-index: 5; width: 58px; font-size: 70px; perspective: 1000px; transform: translateX(10px) skewX(381deg) skewY(355deg) rotateX(65deg) rotateY(12deg) rotateZ(308deg) translateX(0) translateY(-26px) translateZ(-2px) scaleX(1.5) scaleY(1); } psp-cross { transform: translate(0, -15px) } `); } connectedCallback() { this.render(); } render() { this.shadowRoot.innerHTML = /* html */` <style>${PSPLeftContents.styles}</style> <div class="logo"> <span class="p">P</span> <span class="s">S</span> </div> <psp-cross></psp-cross> <psp-pad></psp-pad> `; }} customElements.define("psp-left-contents", PSPLeftContents); class PSPButtons extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } static get styles() { return (/* css */` :host { width: 100%; height: 100px; display: block; } .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; position: relative; height: 100%; opacity: 0.6; } .button { width: 25px; height: 25px; background: var(--frame-color); border-radius: 50%; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #222; border-bottom: 1px solid #222; display: flex; justify-content:center; align-items: center; } .square { font-size: 20px; padding-bottom: 5px; box-sizing: border-box; } .cross { font-size: 12px; } .circle { font-size: 12px; line-height: 40%; } .main-circle { --size: 70%; position: absolute; width: var(--size); height: var(--size); border: 1px solid #fff; border-radius: 50%; border-left: 1px solid #333; border-bottom: 1px solid #333; z-index: -1; } `); } connectedCallback() { this.render(); } render() { this.shadowRoot.innerHTML = /* html */` <style>${PSPButtons.styles}</style> <div class="container"> <div class="empty"></div> <div class="triangle button">△</div> <div class="empty"></div> <div class="square button">□</div> <div class="empty"></div> <div class="circle button">◯</div> <div class="empty"></div> <div class="cross button">✕</div> <div class="empty"></div> <div class="main-circle"></div> </div>`; }} customElements.define("psp-buttons", PSPButtons); class PSPCross extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } static get styles() { return (/* css */` :host { width: 90%; height: 90px; display: flex; justify-content: center; align-items: center; } .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; position: relative; height: 100%; } .button { width: 30px; height: 25px; background: var(--frame-color); display: flex; justify-content:center; align-items: center; font-size: 12px; color: #aaa; border-radius: 5px; } .left, .right { width: 23px; height: 30px; } .up { border-top: 2px solid #222; border-left: 2px solid #111; } .left { border-top: 2px solid #111; border-left: 2px solid #222; } .right { border-top: 2px solid #222; border-right: 2px solid #111; } .down { border-left: 2px solid #111; position: relative; } .down::after { content: ""; display: block; width: 10px; height: 20px; position: absolute; border-left: 2px solid #222; transform: translate(-5px, -14px) rotate(45deg); } `); } connectedCallback() { this.render(); } render() { this.shadowRoot.innerHTML = /* html */` <style>${PSPCross.styles}</style> <div class="container"> <div class="empty"></div> <div class="up button">△</div> <div class="empty"></div> <div class="left button">◁</div> <div class="empty"></div> <div class="right button">▷</div> <div class="empty"></div> <div class="down button">▽</div> <div class="empty"></div> </div>`; }} customElements.define("psp-cross", PSPCross); class PSPFrame extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } static get styles() { return (/* css */` :host { --spiral-path: "M 125 50 L 38 50 Q 31 50 25 35 L 15 10 Q 11.047 0.054 0 0 L 0 0 Q 0 0 0 50"; display: grid; grid-template-columns: 45px 25px 350px 25px 45px; width: 490px; height: 100%; margin: auto; } .frame { background: var(--frame-color); } :host(:not(.invert)) .frame { background-color: black; background-image: radial-gradient(#444 0%, transparent 12%), radial-gradient(#444 0%, transparent 12%), radial-gradient(#444 0%, transparent 12%); background-size: 7px 25px; background-position: 0 -2px, 0 -6px, 0 2px; background-repeat: repeat-x; } .corner { background: var(--trigger-color); } .trigger { background: var(--trigger-color); width: 56px; height: 40px; } .left.trigger { border-radius: 116% 0 0 0 / 103% 0 0 0; transform: translateX(-11px); /* ?? */ } .right.trigger { border-radius: 0% 116% 0% 0% / 0% 103% 0% 0%; } .right.corner::after, .left.corner::after { content: ""; display: block; width: 100%; height: 100%; background: var(--frame-color); clip-path: path(var(--spiral-path)); } .left.corner::after { transform: scaleX(-1); } :host(.invert) { transform: scaleY(-1); } :host(.invert) .right.trigger { display: none; } :host(.invert) .right.corner { background: transparent; } :host(.invert) .reset { transform: scaleY(-1); } :host(.invert) :is(.corner, .frame) { --frame-color: linear-gradient(to bottom, #161616, #000); } :host(.invert) .corner .........完整代码请登录后点击上方下载按钮下载查看
网友评论0