粒子交互背景加载动画效果代码
代码语言:html
所属分类:粒子
代码描述:粒子交互背景加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: "proxima-nova-soft", sans-serif; -webkit-user-select: none; overflow: hidden; } body .vertical-centered-box { position: absolute; width: 100%; height: 100%; text-align: center; } body .vertical-centered-box:after { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } body .vertical-centered-box .content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; vertical-align: middle; text-align: left; font-size: 0; } * { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } body { background: #2c2d44; } .loader-circle { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); margin-left: -60px; margin-top: -60px; } .loader-line-mask { position: absolute; left: 50%; top: 50%; width: 60px; height: 120px; margin-left: -60px; margin-top: -60px; overflow: hidden; -webkit-transform-origin: 60px 60px; -moz-transform-origin: 60px 60px; -ms-transform-origin: 60px 60px; -o-transform-origin: 60px 60px; transform-origin: 60px 60px; -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0)); -webkit-animation: rotate 1.2s infinite linear; -moz-animation: rotate 1.2s infinite linear; -o-animation: rotate 1.2s infinite linear; animation: rotate 1.2s infinite linear; } .loader-line-mask .loader-line { width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); } #particles-background, #particles-foreground { left: -51%; top: -51%; width: 202%; height: 202%; -webkit-transform: scale3d(0.5, 0.5, 1); -moz-transform: scale3d(0.5, 0.5, 1); -ms-transform: scale3d(0.5, 0.5, 1); -o-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); } #particles-background { background: #2c2d44; background-image: -moz-linear-gradient(45deg, #3f3251 2%, #002025 100%); background-image: -webkit-linear-gradient(45deg, #3f3251 2%, #002025 100%); background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%); } lesshat-selector { -lh-property.........完整代码请登录后点击上方下载按钮下载查看
网友评论0