css布局实现搅拌loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css布局实现搅拌loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap"); html { font-family: "PT Sans Narrow", Ariel, sans-serif; font-weight: 300; font-size: 16px; box-sizing: border-box; } html *, html *::before, html *::after { font-family: inherit; font-weight: inherit; box-sizing: inherit; } body { display: flex; flex-direction: column; min-height: 100vh; width: 100vw; margin: 0; padding: 0; } @media (min-width: 768px) { body { flex-direction: row; } } section { display: flex; flex-direction: column; flex: 1 0 50%; } section:first-child { background: #1e1e26; } .app-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; width: 100%; height: 100%; padding: 3rem 1rem; } .app-loader.light { color: #1e1e26; } .app-loader.light .app-loader__wisk-handle { background: #fff; } .app-loader.light .app-loader__bowl { background: #fff; } .app-loader__text { display: flex; justify-content: center; text-transform: uppercase; margin: 0 0 4rem; width: 100%; } .app-loader__text { font-size: 1.25rem; } @media screen and (min-width: 20rem) { .app-loader__text { font-size: calc( 1.25rem + 1.25 * ((100vw - 20rem) / 62) ); } } @media screen and (min-width: 82rem) { .app-loader__text { font-size: 2.5rem; } } .app-loader__text span { flex: 0 0 auto; position: relative; -webkit-animation: flip 10s ease-in infinite; animation: flip 10s ease-in infinite; perspective: 1000px; transform-style: preserve-3d; transform-origin: 50% 50%; } .app-loader__text span:nth-of-type(1) { -webkit-animation-delay: 0ms; animation-delay: 0ms; z-index: 1; } .app-loader__text span:nth-of-type(2) { -webkit-animation-delay: 100ms; animation-delay: 100ms; z-index: 2; } .app-loader__text span:nth-of-type(3) { -webkit-animation-delay: 200ms; animation-delay: 200ms; z-index: 3; } .app-loader__text span:nth-of-type(4) { -webkit-animation-delay: 300ms; animation-delay: 300ms; z-index: 4; } .app-loader__text span:nth-of-type(5) { -webkit-animation-delay: 400ms; animation-delay: 400ms; z-index: 5; } .app-loader__text span:nth-of-type(6) { -webkit-animation-delay: 500ms; animation-delay: 500ms; z-index: 6; } .app-loader__text span:nth-of-type(7) { -webkit-animation-delay: 600ms; animation-delay: 600ms; z-index: 7; } .app-loader__text span:nth-of-type(8) { -webkit-animation-delay: 700ms; animation-delay: 700ms; z-index: 8; } .app-loader__text span:nth-of-type(9) { -webkit-animation-delay: 800ms; animation-delay: 800ms; z-index: 9; } .app-loader__text span:nth-of-type(10) { -webkit-animation-delay: 900ms; animation-delay: 900ms; z-index: 10; } .app-loader__text span:nth-of-type(11) { -webkit-animation-delay: 1000ms; animation-delay: 1000ms; z-index: 11; } .app-loader__text span:nth-of-type(12) { -webkit-animation-delay: 1100ms; animation-delay: 1100ms; z-index: 12; } .app-loader__text span:nth-of-type(13) { -webkit-animation-delay: 1200ms; animation-delay: 1200ms; z-index: 13; } .app-loader__text span:nth-of-type(14) { -webkit-animation-delay: 1300ms; animation-delay: 1300ms; z-index: 14; } .app-loader__text span:nth-of-type(15) { -webkit-animation-delay: 1400ms; animation-delay: 1400ms; z-index: 15; } .app-loader__text span:nth-of-type(16) { -webkit-animation-delay: 1500ms; animation-delay: 1500ms; z-index: 16; } .app-loader__text span:nth-of-type(17) { -webkit-animation-delay: 1600ms; animation-delay: 1600ms; z-index: 17; } .app-loader__text span:nth-of-type(18) { -webkit-animation-delay: 1700ms; animation-delay: 1700ms; z-index: 18; } .app-loader__text span:nth-of-type(19) { -webkit-animation-delay: 1800ms; animation-delay: 1800ms; z-index: 19; } .app-loader__text span:nth-of-type(20) { -webkit-animation-delay: 1900ms; animation-delay: 1900ms; z-index: 20; } .app-loader__text span:nth-of-type(21) { -webkit-animation-delay: 2000ms; animation-delay: 2000ms; z-index: 21; } .app-loader__text span:nth-of-type(22) { -webkit-animation-delay: 2100ms; animation-delay: 2100ms; z-index: 22; } .app-loader__text span:nth-of-type(23) { -webkit-animation-delay: 2200ms; animation-delay: 2200ms; z-index: 23; } .app-loader__text span:nth-of-type(24) { -webkit-animation-delay: 2300ms; animation-delay: 2300ms; z-index: 24; } .app-loader__text span:nth-of-type(25) { -webkit-animation-delay: 2400ms; animation-delay: 2400ms; z-index: 25; } .app-loader__text span:nth-of-type(26) { -webkit-animation-delay: 2500ms; animation-delay: 2500ms; z-index: 26; } .app-loader__text span:nth-of-type(27) { -webkit-animation-delay: 2600ms; animation-delay: 2600ms; z-index: 27; } .app-loader__text span:nth-of-type(28) { -webkit-animation-delay: 2700ms; animation-delay: 2700ms; z-index: 28; } .app-loader__text span:nth-of-type(29) { -webkit-animation-delay: 2800ms; animation-delay: 2800ms; z-index: 29; } .app-loader__text span:nth-of-type(30) { -webkit-animation-delay: 2900ms; animation-delay: 2900ms; z-index: 30; } .app-loader__text span:nth-of-type(31) { -webkit-animation-delay: 3000ms; animation-delay: 3000ms; z-index: 31; } .app-loader__text span:nth-of-type(32) { -webkit-animation-delay: 3100ms; animation-delay: 3100ms; z-index: 32; } .app-loader__text span:nth-of-type(33) { -webkit-animation-delay: 3200ms; animation-delay: 3200ms; z-index: 33; } .app-loader__text span:nth-of-type(34) { -webkit-animation-delay: 3300ms; animation-delay: 3300ms; z-index: 34; } .app-loader__text span:nth-of-type(35) { -webkit-animation-delay: 3400ms; animation-delay: 3400ms; z-index: 35; } .app-loader__text span:nth-of-type(36) { -webkit-animation-delay: 3500ms; animation-delay: 3500ms; z-index: 36; } .app-loader__text span:nth-of-type(37) { -webkit-animation-delay: 3600ms; animation-delay: 3600ms; z-index: 37; } .app-loader__text span:nth-of-type(38) { -webkit-animation-delay: 3700ms; animation-delay: 3700ms; z-index: 38; } .app-loader__text span:nth-of-type(39) { -webkit-animation-delay: 3800ms; animation-delay: 3800ms; z-index: 39; } .app-loader__text span:nth-of-type(40) { -webkit-animation-delay: 3900ms; animation-delay: 3900ms; z-index: 40; } .app-loader__text span:nth-of-type(41) { -webkit-animation-delay: 4000ms; animation-delay: 4000ms; z-index: 41; } .app-loader__text span:nth-of-type(42) { -webkit-animation-delay: 4100ms; animation-delay: 4100ms; z-index: 42; } .app-loader__text span:nth-of-type(43) { -webkit-animation-delay: 4200ms; animation-delay: 4200ms; z-index: 43; } .app-loader__text span:nth-of-type(44) { -webkit-animation-delay: 4300ms; animation-delay: 4300ms; z-index: 44; } .app-loader__text span:nth-of-type(45) { -webkit-animation-delay: 4400ms; animation-delay: 4400ms; z-index: 45; } .app-loader__text span:nth-of-type(46) { -webkit-animation-delay: 4500ms; animation-delay: 4500ms; z-index: 46; } .app-loader__text span:nth-of-type(47) { -webkit-animation-delay: 4600ms; animation-delay: 4600ms; z-index: 47; } .app-loader__text span:nth-of-type(48) { -webkit-animation-delay: 4700ms; animation-delay: 4700ms; z-index: 48; } .app-loader__text span:nth-of-type(49) { -webkit-animation-delay: 4800ms; animation-delay: 4800ms; z-index: 49; } .app-loader__text span:nth-of-type(50) { -webkit-animation-delay: 4900ms; animation-delay: 4900ms; z-index: 50; } .app-loader__text span:nth-of-type(51) { -webkit-animation-delay:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0