div+css实现乐高积木堆积loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现乐高积木堆积loading加载动画效果代码
代码标签: div css 乐高 积木 堆积 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { box-sizing: border-box; } body { background: #242424; color: #fff; overflow: hidden; } .loader { position: fixed; display: flex; top: 50%; left: 50%; transform: translate(-50%, -50%); --brick-height: 120px; --brick-width: 65px; } .loader .brick { width: var(--brick-width); height: var(--brick-height); --brick-bg: #AB3638; --brick-cr-bg: #892B2D; background: var(--brick-bg); margin: 0 0; position: relative; z-index: 2; } .loader .brick:after, .loader .brick:before { content: ""; position: absolute; right: -20px; top: 15px; width: 20px; height: 35px; z-index: -1; background: var(--brick-bg); box-shadow: 10px -20px 0px 0px var(--brick-cr-bg) inset; } .loader .brick:before { top: auto; bottom: 15px; } .loader .brick:nth-child(1) { --brick-bg: hsl(0deg 46% 38.12%); } .loader .brick:nth-child(2) { --brick-bg: hsl(0deg 48% 40.12%); } .loader .brick:nth-child(3) { --brick-bg: hsl(0deg 50% 42.12%); } .loader .brick:nth-child(4) { --brick-bg: hsl(0deg 52% 44.12%); } .loader .brick:not(:last-child) { animation: slide 1s ease-in-out infinite; } .loader .bric.........完整代码请登录后点击上方下载按钮下载查看
网友评论0