尾部点下落加载loading动画效果
代码语言:html
所属分类:加载滚动
代码描述:尾部点下落加载loading动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap"); body { display: grid; place-content: center; min-height: 100vh; margin: 0; padding: 2px; box-sizing: border-box; overflow: hidden; } h1 { font-family: 'Open Sans', -apple-system, 'Segoe UI', sans-serif; font-size: 50px; font-weight: bold; color: #212121; box-sizing: border-box; } .dots { display: -webkit-inline-box; display: inline-flex; } .dots--animate .dot.z { -webkit-animation: scale .8s .2s forwards; animation: scale .8s .2s forwards; } .dots--animate .dot.f, .dots--animate .dot.s { -webkit-animation: right .5s forwards; animation: right .5s forwards; } .dots--animate .dot.l { -webkit-animation: rightDown .4s .1s forwards linear, drop 2s .4s forwards linear; animation: rightDown .4s .1s forwards linear, drop 2s .4s forwards linear; } .dot { display: inline-block; width: 10px; height: 10px; background: #212121; border-radius: 10px; position: relative; margin-left: 6px; } .dot.z { position: absolute; -webkit-transform: scale(0); transform: scale(0); } @-webkit-keyframes scale { 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale { 100% { -webkit-transform: scale(1); transform: scale(1); } } .dot.f, .dot.s { -webkit-transform: translateX(0px); transform: translateX(0px); } @-webkit-keyframes right { 100% { -webkit-transform: translateX(16px); transform: translateX(16px); } } @keyframes right { 100% { -webkit-transform: translateX(16px); transform: translateX(16px); } } .dot.t { background: transparent; } .dot .l { margin-left: 0; position: absolute; top: 0; left: 0; } @-webkit-keyframes rightDown { 50% { top: 4px; left: 16px; } 100% { top: 12px; left: 24px; } } @keyframes rightDown { 50% { top: 4px; left: 16px; } 100% { top: 12px; left: 24px; } } @-webkit-keyframes drop { 100% { -webkit-transform: translate(70px, calc(35px + (100vh/2))); transform: translate(70px, calc(35px + (100vh/2))); } } @keyframes drop { 100% { -webkit-transform: translate(70px, calc(35px + (100vh/2))); transform: translate(70px, calc(35px + (100vh/2))); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0