纯css三维游戏塔效果
代码语言:html
所属分类:三维
代码描述:纯css三维游戏塔效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --fan-color-1: hsla(217, 100%, 50%, 100%); --fan-color-2: hsla(342, 100%, 50%, 100%); --fan-color-3: hsla(153, 100%, 50%, 100%); --fan-color-4: hsla(190, 100%, 50%, 100%); --fan-color-5: hsla(332, 100%, 50%, 100%); --fan-color-6: rgb(255, 255, 0); --tower-4: #202020; --tower-3: #404040; --tower-2: #606060; --tower-1: #808080; } body { background: #44e1f2; display: flex; height: 100vh; justify-content: center; margin: 0; } .tower-frame { height: 12em; perspective: 750px; position: relative; transform-style: preserve-3d; transform: rotateY(43deg) translate(-50%, -49%); width: 10em; } .tower-face { background: var(--tower-2); height: inherit; position: absolute; width: inherit; } .button-wrapper { align-items: center; background: #82828d; border-radius: 50%; box-shadow: inset 0px 1px 1px #82828d, 0px 1px 3px rgba(0, 0, 0, 0.5); display: flex; height: 23px; justify-content: center; margin-bottom: 1em; width: 32px; } .button { background: var(--tower-1); border-radius: 50%; border: 2px solid var(--tower-4); box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 1), 0px 1px 3px rgba(0, 0, 0, 0.5); height: 13px; width: 18px; } .button:active { width: 15px; height: 11px; } .tower-front { align-items: flex-end; display: flex; justify-content: center; transform: rotateY(5deg) translateZ(9.98em); } .tower-back { transform: rotateY(5deg); } .tow.........完整代码请登录后点击上方下载按钮下载查看
网友评论0