点状loadding加载动画
代码语言:html
所属分类:加载滚动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dots Loader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> html, body { height: 100%; } body { background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; } .four { width: 0px; height: 0px; position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .four .dot { width: 4px; height: 4px; background: #fff; border-radius: 50%; position: absolute; } .four .dot.d1 { left: -2px; top: -2px; } .four .dot.d2 { right: -2px; top: -2px; } .four .dot.d3 { left: -2px; bottom: -2px; } .four .dot.d4 { right: -2px; bottom: -2px; } .four .dot.d5 { right: -2px; bottom: -2px; } .four .dot.d7 { left: -2px; bottom: -2px; } .four .dot.d8 { right: -2px; top: -2px; } .four .dot.d9 { left: -2px; top: -2px; } .four .dot.d10 { right: -42px; bottom: -42px; width: 0; height: 0; } .four .dot.d11 { left: -52px; bottom: -2px; opacity: 0; } .four .dot.d12 { right: -52px; top: -2px; opacity: 0; } .four .dot.d13 { right: -52px; top: -2px; opacity: 0; } .four .dot.d14 { left: -2px; bottom: -52px; opacity: 0; } .four .dot.d15 { right: -2px; top: -52px; opacity: 0; } .four .dot.d16 { left: -52px; bottom: -2px; opacity: 0; } .four .dot.d17 { right: 88px; top: -44px; opacity: 0; } .four .dot.d18 { left: 47px; bottom: -51px; opacity: 0; } .four .dot.d19 { bottom: -51px; left: -2px; opacity: 0; } .four .dot.d20 { left: -51px; bottom: -2px; opacity: 0; } .four .dot.d21 { left: -52px; top: -1px; opacity: 0; } .four .dot.d22 { top: -52px; right: -2px; opacity: 0; } .four .dot.d23 { right: 48px; top: -52px; opacity: 0; } .four .dot.d24 { right: -50px; bottom: 48px; opacity: 0; } .four .dot.d25 { right: -51px; top: 47px; opacity: 0; } .four .circle { width: 4px; height: 4px; border: 2px solid #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .four .circle.c5 { width: 30px; height: 30px; opacity: 0; } .progress { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 40px; display: none; } </style> </head> <body translate="no"> <div class="four"> <div class="dot d1"><div class="circle c4"></div></div> <div class="dot d2"><div class="circle c1"></div></div> <div class="dot d3"><div class="circle c2"></div></div> <div class="dot d4"><div class="circle c3"></div></div> <div class="dot d5"></div> <div class="dot d7"></div> <div class="dot d8"><div class="circle c6"></div></div> <div class="dot d9"></div> <div class="dot d10"><div class="circle c5"></div></div> <div class="dot d11"><div class="circle c8"></div></div> <div class="dot d12"><div class="circle c7"></div></div> <div class="dot d13"></div> <div class="dot d14"></div> <div class="dot d15"></div> <div class="dot d16"></div> <div class="dot d17"></div> <div class="dot d18"></div> <div class="dot d19"></div> <div class="dot d20"></div> <div class="dot d21"></div> <div class="dot d22"></div> <div class="dot d23"></div> <div class="dot d24"></div> <div class="dot d25"></div> </div> <input class="progress" step=".001" type="range" min="0" max="100" value="0"> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js'></script> <script> let controlsProgressEl = document.querySelector('.progress'); let tl = anime.timeline({ // direction: 'alternate', loop: true, update: () => { controlsProgressEl.value = tl.progress; } }); $(window).on('load', () => { tl. add({ targets: '.four', width: 50, height: 50, rotate: 180, translateX: ['-50%', '-50%'], translateY: ['-50%', '-50%'], duration: 300, easing: 'linear' }). add({ targets: '.d7', translateX: -50, duration: 300, easing: 'linear' }). add({ targets: '.c2', width: 30, height: 30, opacity: 0, translateX: ['-50%', '-50%'], translateY: ['-50%', '-50%'], duration: 300, easing: 'linear' }, '-=250'). add({ targets: '.d5, .d8', translateX: 50, duration: 150, easing: 'linear' }, '-=150'). add({ targets: '.c1', width: 30, height: 30, opacity: 0, translateX: ['-50%', '-50%'], translateY: ['-50%', '-50%'], duration: 300, easing: 'linear' }, '-=145'). add({ targets: '.d9', translateX: -50, duration: 150, easing: 'linear' }, '-=290'). add({ targets: '.c3', width: 30, height: 30, opacity: 0, translateX: ['-50%', '-50%'], translateY: ['-50%', '-50%'], duration: 300, easing: 'linear' }, '-=250'). add({ targets: '.c4', width: 30, height: 30, opacity: 0, translateX: ['-50%', '-50%'], translateY: ['-50%', '-50%'], duration: 300, easing: 'linear' }, '-=250'). add({ targets: '.c5', opacity: 1, translateX: ['-50%', '-50%'], translateY: ['-50%', '-50%'], duration: 1, easing: 'linear' }). add({ targets: '.c5', width: 0, height: 0, opacity: 0, translateX: ['-50%', '-50%'], translateY: ['-50%', '-50%'], duration: 300, easing: 'linear' }). add({ targets: '.d10', width: 4, height: 4, duration: 1, easing: 'linear' }, '-=50'). add({ targets: '.c6', width: 30, height: 30, opacity: 0, translateX: ['-50%', '-50%'], translateY: ['-50%', '-50%'], duration: 300, easing: 'linear' }, '-=270'). add({ targets: '.d11', opacity: 1, duration: 1, easing: 'linear' }, '-=250'). add({ targets: '.d11', translateX: 50, translateY: 50, duration: 150, easing: 'linear' }, '-=250'). add({ targets: '.d12', opacity: 1, duration: 1, easing: 'linear' }, '-=230'). add({ targets: '.d12', translateX: -50, translateY: -50, duration: 150, easing: 'linear' }, '-=230'). add({ targets: '.d13', opacity: 1, duration: 1, easing: 'linear' }, '-=180'). add({ targets: '.d13', translateY: -42, duration: 150, easing: 'linear' }, '-=180'). add({ targets: '.c7, .c8', width: 30, height: 30, opacity: 0, translateX: ['-50%', '-50%'], translateY: ['-50%', '-50%'], duration: 300, easing: 'linear' }, '-=70'). add({ targets: '.d14', opacity: 1, duration: 1, easing: 'linear' }, '-=180'). add({ targets: '.d14', translateX: 50, duration: 150, easing: 'linear' }, '-=180'). add({ targets: '.d15', opacity: 1, duration: 1, easing: 'linear' }, '-=180'). add({ targets: '.d15', translateX: -50, duration: 150, easing: 'linear' }, '-=180'). add({ targets: '.d16', opacity: 1, duration: 1, easing: 'linear' }, '-=150'). add({ targets: '.d16', translateY: 42, duration: 150, easing: 'linear' }, '-=150'). add({ targets: '.d13', width: 10, height: 10, right: -45, top: -5, duration: 200, easing: 'linear' }, '-=350'). add({ targets: '.d13', width: 4, height: 4, right: -42, top: -2, duration: 200, easing: 'linear' }). add({ targets: '.d16', width: 15, height: 15, left: -48, bottom: -7, duration: 200, easing: 'linear' }, '-=200'). add({ targets: '.d16', width: 4, height: 4, left: -41, bottom: -2, duration: 200, easing: 'linear' }). add({ targets: '.d3', width: 60, height: 60, left: -35, bottom: -35, duration: 200, easing: 'linear' }, '-=180'). add({ targets: '.d1', width: 60, height: 60, left: -35, top: -35, duration: 200, easing: 'linear' }, '-=200'). add({ targets: '.d4', width: 60, height: 60, right: -35, bottom: -35, duration: 200, easing: 'linear' }, '-=210'). add({ targets: '.d2', width: 60, height: 60, right: -35, top: -35, duration: 200, easing: 'linear' }, '-=210'). add({ targets: '.d17', opacity: 1, duration: 150, easing: 'linear' }, '-=220'). add({ targets: '.d10', width: 36, height: 36, right: -85, bottom: -85, duration: 200, easing: 'linear' }, '-=110'). add({ targets: '.d14', width: 36, height: 36, left: -17, bottom: -85, duration: 200, easing: 'linear' }, '-=200'). add({ targets: '.d11', width: 36, height: 36, left: -67, bottom: -25, duration: 200, easing: 'linear' }, '-=200'). add({ targets: '.d5', width: 36, height: 36, right: -35, bottom: -15, duration: 200, easing: 'linear' }, '-=200'). add({ targets: '.d8', width: 36, height: 36, right: -35, top: -16, duration: 200, easing: 'linear' }, '-=200'). add({ targets: '.d13', width: 36, height: 36, right: -85, top: -44, duration: 200, easing: 'linear' }, '-=200'). add({ targets: '.d12', width: 36, height: 36, right: -66, top: -36, duration: 200, easing: 'linear' }, '-=200'). add({ targets: '.d15', width: 36, height: 36, right: -16, top: -86, duration: 200, easing: 'linear' }, '-=200'). .........完整代码请登录后点击上方下载按钮下载查看
网友评论0