js+css实现《星际穿越》中机器人tars行走动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现《星际穿越》中机器人tars行走动画效果代码
代码标签: 星际穿越 》 中 机器人 tars 行走 动画 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Ramabhadra&display=swap'); body { background: #447; } .container { display: flex; flex-direction: column; align-items: center; perspective: 900px; } .buttons { margin: 2em 0 6em; display: flex; gap: 0 15px; } .buttons button { padding: 10px; font-size: 16px; background: #1283d1; border: 0; border-radius: 10px; color: #eee; box-shadow: 0 7px 0 #0863a5, 0 8px 3px rgb(0 0 0 / 30%); transition: all 0.25s; cursor: pointer; } .buttons button:active { color: #888; background: #08477a; transform: translateY(5px); box-shadow: 0 2px 0 #0863a5, 0 3px 3px rgb(0 0 0 / 30%); } .buttons button.active { background: #0a5694; transform: translateY(3px); box-shadow: 0 4px 0 #0863a5, 0 5px 3px rgb(0 0 0 / 30%); } </style> </head> <body> <div class="container"> <div class="buttons"> <button>Spin</button> <button>Walk</button> <button>Run</button> </div> <tars-robot></tars-robot> </div> <script> /* TARSBlock */ class TARSBlock extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } static get styles() { return (/* css */` :host { --width: 100px; --height: var(--width); --offset: 600px; width: var(--width); height: var(--height); display: block; position: relative; transform-style: preserve-3d; perspective: 8000px; } .face-1, .face-2, .face-5, .face-6 { --height: var(--offset); } .face { width: var(--width); height: var(--height); position: absolute; transform-style: preserve-3d; perspective: 8000px; } /* right face */ .face-1 { transform-origin: 100% 0%; transform: rotateY(-90deg); background: #2C2B29; } /* left face */ .face-2 { transform-origin: 0% 0%; transform: rotateY(90deg); background: #2C2B29; } /* bottom face */ .face-3 { transform-origin: 100% 100%; transform: translateY(calc(var(--offset) - var(--width))) rotateX(90deg); background: #272727; } /* top face */ .face-4 { transform-origin: 100% 0; transform: rotateX(-90deg); background: #aaa; } /* front face */ .face-5 { background: #504C4B; } /* back face */ .face-6 { transform: translateZ(calc(var(--width) * -1)); transform-origin: 100% 100%; background: #444; } .face-1::before, .face-2::before, .face-5::before, .face-6::before { content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(to top, #fff3, #0003); position: absolute; top: 0; opacity: 0; } .face-1::after, .face-2::after, .face-5::after, .face-6::after { content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, #fff3, #0003); position: absolute; top: 0; opacity: 1; } `); } debug() { console.log(getComputedStyle(this.shadowRoot.querySelector(".face-1")).transform); } connectedCallback() {var _this$getAttribute; this.type = (_this$getAttribute = this.getAttribute("type")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "legs"; this.render(); this.addEventListener("click", () => this.debug()); } getFace() { const OPTIONS = { legs: "<tars-face-legs></tars-face-legs>", main: "<tars-face-main></tars-face-main>", side: "<tars-face-side></tars-face-side>" }; return OPTIONS[this.type]; } getSide() { return this.type === "main" || this.type === "side" ? "<tars-side-side></tars-side-side>" : ""; } render() { this.shadowRoot.innerHTML = /* html */` <style>${TARSBlock.styles}</style> <div class="face face-1">${this.getSide()}</div> <div class="face face-2">${this.getSide()}</div> <div class="face face-3 bottom"></div> <div class="face face-4 top"></div> <div class="face face-5 front">${this.getFace()}</div> <div class="face face-6"></div> `; }} customElements.define("tars-block", TARSBlock); /* TARSFaceLegs */ class TARSFaceLegs extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } static get styles() { return (/* css */` :host { display: flex; flex-direction: column; height: 100%; } .end { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 22%; } .end > div { border: 1px solid #333; border-top: 1px solid #aaa; } .separator { display: grid; grid-template-columns: repeat(4, 1fr); height: 8%; } .separator .block { display: grid; grid-template-columns: repeat(4, 1fr); } .separator .block > div { border: 1px solid #333; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } .center { display: grid; grid-template-rows: 1fr 1fr; height: 50%; } .center .block { display: grid; width: 100%; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; } .center .block > div { border: 1px solid #333; } `); } connectedCallback() { this.render(); } render() { this.shadowRoot.innerHTML = /* html */` <style>${TARSFaceLegs.styles}</style> <div class="end"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="separator"> <div class="block"> <div></div> <div></div> <div></div> <div></div> </div> <div class="block"> <div></div> <div></div> <div></div> <div></div> </div> <div class="block"> <div></div> <div></div> <div></div> <div></div> </div> <div class="block"> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="center"> <div class="block"> <div></div> <div></div> <div></div> <div></div> </div> <div class="block"> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="separator"> <div class="block"> <div></div> <div></div> <div></div> <div></div> </div> <div class="block"> <div></div> <div></div> <div></div> <div></div> </div> <div class="block"> <div></div> <div></div> <div></div> <div></div> </div> <div class="block"> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="end"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> `; }} customElements.define("tars-face-legs", TARSFaceLegs); /* TARSFaceMain */ class TARSFaceMain extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } static get styles() { return (/* css */` :host { display: flex; flex-direction: column; height: 100%; } .end { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 20%; } .end > div { border: 1px solid #333; } .black { background: #000; width: 100%; height: 20%; } .black.screen { color: #1BE820; font-size: 2px; white-space: pre; position: relative; } .black.screen::before { content: ""; width: 100%; height: 20%; display: block; background: #2225; } .text { font-family: Ramabhadra; font-weight: bold; font-size: 40px; color: #b87333b4; text-shadow: 0 0 4px #48320B; transform-origin: 0 0; transform: rotate(-90deg); position: absolute; bottom: -16px; left: 7px; line-height: 75%; } .dots { letter-spacing: -5px; } .joke { background: #9CBEAB; width: 5px; height: 5px; position: absolute; top: 4px; left: 2px; opacity: 0; transition: opacity: 0.1s; } .joke.on { opacity: 1; } .center { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 65%; } .center > div { border: 1px solid #333; position: relative; } `); } getTerminalText() { return ` <div class="joke"></div> Welcome to TA.........完整代码请登录后点击上方下载按钮下载查看
网友评论0