css实现圆点走动loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现圆点走动loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { padding: 0px; background-color: #002031; } .s2 { position: absolute; height: 100px; width: 100px; background-color: transparent; top: 50vh; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .s1 { position: absolute; height: 100px; width: 100px; top: 50vh; left: 50%; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); background-color: transparent; } .bigcon { position: absolute; height: 95px; width: 95px; top: 50vh; left: 50%; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); background-color: transparent; -webkit-animation: bigcon 2s infinite linear; animation: bigcon 2s infinite linear; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .b { border-radius: 50%; position: absolute; } .s { width: 25px; height: 25px; -webkit-animation: small 2s infinite ease; animation: small 2s infinite ease; box-shadow: 0px 2px rgba(0,0,0,0.3); background-color: #46b9ff; } .s:nth-child(1) { top: 0%; left: 0%; } .s:nth-child(2) { top: 0%; right: 0%; } .s:nth-child(3) { right: 0%; bottom: 0%; } .s:nth-child(4) { bottom: 0%; left: 0%; } .big { width: 20px; height: 20px; border-radius: 15px; box-shadow:0px 0px 10px #54f7f8, 0px 0px 20px #54f7f8, 0px 0px 30px #54f7f8, 0px 0px 50px #54f7f8, 0px 0px 60px #54f7f8 ; z-index: 1; background-color: #54f7f8; -webkit-animation: bigball 1s infinite linear; animation: bigball 1s infinite linear; } .sb1{ -webkit-animation-delay: -1.75s; animation-delay: -1.75s; } .sb6{ -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .sb2{ -webkit-animation-delay: -1.25s; animation-delay: -1.25s; } .sb7{ -webkit-animation-delay: -1s; animation-delay: -1s; } .sb3{ -webkit-animation-delay: -0.75s; animation-delay: -0.75s; } .sb8{ -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .sb4{ -webkit-animation-delay: -0.25s; animation-delay: -0.25s; } .sb5{ -webkit-animation-delay: -0s; animation-delay: -0s; } @-webkit-keyframes bigcon { 0% { -webkit-transform-origin: center; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0