div+css实现彩色框重叠交叉loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现彩色框重叠交叉loading加载动画效果代码
代码标签: div css 彩色 框 重叠 交叉 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --background-color: #201b38; --animation-duration: 3.3s; --shape-dimaension: 50px; --loading-small-dimension: 20px; --loading-big-dimension: 275px; } * { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } body { background-color: #201b38; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .loading { width: var(--loading-big-dimension); height: var(--loading-big-dimension); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .loading div { -webkit-animation-name: loading; animation-name: loading; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; position: relative; } .loading div, .loading div span::before { -webkit-animation-duration: var(--animation-duration); animation-duration: var(--animation-duration); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .loading div span { position: absolute; } .loading div span::before { content: ""; display: block; width: var(--shape-dimaension); height: var(--shape-dimaension); border-width: 3px; border-style: solid; border-radius: 12px; -webkit-animation-name: span; animation-name: span; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .loading div span:nth-child(1) { top: 14.64444%; left: 14.64444%; } .loading div span:nth-child(2) { top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .loading div span:nth-child(3) { top: 14.64444%; right: 14.64444%; } .loading div span:nth-child(4) { top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .loading div span:nth-child(5) { bottom: 14.64444%; right: 14.64444%; } .loading div span:nth-child(6) { bottom: 0; left: 50%; -webkit-transform: translat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0