3d加载动画loading效果
代码语言:html
所属分类:加载滚动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap'> <style> .loading { --load: 10000ms; --border: #646B8C; --background: #fff; --background-perspective: #F6F8FF; --active: #5C86FF; margin: 52px 0; } .loading > div { -webkit-transform: perspective(var(--p, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform: perspective(var(--p, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; cursor: pointer; } .loading > div span { display: block; color: var(--c, #404660); line-height: 23px; font-size: var(--s, 16px); font-weight: 500; margin-bottom: 8px; } .loading > div span:nth-child(2) { --c: #BBC1E1; --s: 14px; position: absolute; top: 100%; left: 0; margin-top: 8px; } .loading > div ul { width: 360px; height: 36px; margin: 0; padding: 0; list-style: none; } .loading > div ul li { --ry: 0deg; --z: 0; --x: 0; position: absolute; bottom: 0; background: var(--b, var(--background)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); width: var(--w, 200px); left: var(--l, 0); height: 36px; -webkit-transform: rotateY(var(--ry)) translateZ(var(--z)) translateX(var(--x)); transform: rotateY(var(--ry)) translateZ(var(--z)) translateX(var(--x)); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0