three+InfiniteLights实现三维高速光迹光影运动效果代码
代码语言:html
所属分类:三维
代码描述:three+InfiniteLights实现三维高速光迹光影运动效果代码
代码标签: InfiniteLights three 光迹 光影 三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *, *::after, *::before { box-sizing: border-box; } :root { font-size: 18px; } body { margin: 0; --color-text: #fff; --color-bg: #000; --color-link: #5a5a5a; --color-link-hover: #3eaaf1; --color-alt: #3ba2e5; --color-info: #e93f3b; color: var(--color-text); background-color: var(--color-bg); font-family: ltc-bodoni-175, serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .demo-2 { --color-link-hover: #53C2C6; --color-alt: #53C2C6; --color-info: #FF5F73; } .demo-3 { --color-link-hover: #DFD98A; --color-alt: #DFD98A; --color-info: #A90519; } .demo-4 { --color-info: #D856BF; } .demo-5 { --color-link-hover: #334BF7; --color-alt: #334BF7; --color-info: #DC5B20; } .demo-6 { --color-info: #FF322F; } .demo-7 { --color-link-hover: #7686BF; --color-alt: #7686BF; --color-info: #E2173C; } /* Page Loader */ .js .loading::before, .js .loading::after { content: ''; position: fixed; z-index: 1000; } .js .loading::before { top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); } .js .loading::after { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5,0.5,1) rotate3d(0,0,1,180deg); border-radius: 50%; } } a { text-decoration: none; color: var(--color-link); outline: none; } a:hover, a:focus { color: var(--color-link-hover); outline: none; } .message { background: var(--color-text); color: var(--color-bg); padding: 1rem; text-align: center; } .frame { padding: 3rem 5vw; text-align: center; position: relative; z-index: 1000; } .frame__title { font-size: 1rem; margin: 0 0 1rem; font-weight: normal; } .frame__links { display: inline; } .frame__links a { display: block; margin: 0 1rem 0.5rem; } .frame__demos { margin: 1rem 0; } .frame__demo { display: block; padding-top: 0.5rem; } .frame__demo--current, .frame__demo--current:hover { color: var(--color-link-hover); } .frame__info { color: var(--color-info); } .content { display: flex; flex-direction: column; width: 100vw; height: calc(100vh - 13rem); position: relative; justify-content: flex-start; align-items: center; } .content__title-wrap { position: relative; text-align: center; pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .content__title-wrap a { pointer-events: auto; } .content__pretitle { color: var(--color-alt); font-size: 1.35rem; } .content__title { font-size: 6vw; font-weight: normal; margin: 0.5rem 0 1.5rem; font-family: azo-sans-uber, sans-serif; } .content__link { text-decoration: underline; font-family: azo-sans-uber, sans-serif; font-size: 1.1rem; color: inherit; } #app { width: 100%; height: 100vh; overflow: hidden; position: absolute; } canvas { width: 100%; height: 100%; } @media screen and (min-width: 53em) { .message { display: none; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0