css实现点线跳动loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现点线跳动loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #e3e4e8; --fg: #17181c; --c1: #f42f25; --c2: #f49725; --c3: #255ff4; --c4: #9725f4; font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body { background: var(--bg); color: var(--fg); display: flex; flex-wrap: wrap; font: 1em/1.5 sans-serif; justify-content: center; align-items: center; align-content: center; height: 100vh; } .pl1, .pl2 { justify-content: space-around; } .pl1__a, .pl1__b, .pl1__c, .pl2__a, .pl2__b, .pl2__c { border-radius: 50%; width: 1em; height: 1em; transform-origin: 50% 100%; } .pl1__a, .pl1__b, .pl1__c { animation: bounce1 1s linear infinite; } .pl2__a, .pl2__b, .pl2__c { animation: bounce2 2s linear infinite; } .pl3, .pl4 { justify-content: space-between; } .pl3__a, .pl3__b, .pl3__c, .pl3__d, .pl4__a, .pl4__b, .pl4__c, .pl4__d { width: 0.75em; height: 0.75em; } .pl3__a, .pl3__b, .pl3__c, .pl3__d { animation: bounce3 2s ease-in-out infinite; transform-origin: 50% 0; } .pl4 { align-items: flex-end; } .pl4__a, .pl4__b, .pl4__c, .pl4__d { animation: bounce4 2s linear infinite; transform-origin: 50% 100%; } .pl1, .pl2, .pl3, .pl4 { display: flex; margin: 1.5em; width: 6em; height: 6em; } .pl1__a, .pl2__a, .pl3__a, .pl4__a { background: var(--c1); } .pl1__b, .pl2__b, .pl3__b, .pl4__b { background: var(--c2); animation-delay: 0.1s; } .pl1__c, .pl2__c, .pl3__c, .pl4__c { background: var(--c3); animation-delay: 0.2s; } .pl3__d, .pl4__d { background: var(--c4); animation-delay: 0.3s; } /* Animations */ @keyframes bounce1 { from, to { transform: translateY(0) scale(1, 1); animation-timing-function: ease-in; } 45% { transform: translateY(5em) scale(1, 1); animation-timing-function: linear; } 50% { transform: translateY(5em) scale(1.5, 0.5); animation-timing-function: linear; } 55% { transform: translateY(5em) scale(1, 1); animation-timing-function: ease-out; } } @keyframes bounce2 { from, to { transform: translateY(0) scale(1, 1); animation-timing-function: ease-in; } 9%, 29%, 49%, 69% { transform: translateY(5em) scale(1, 1); animation-timing-function: linear; } 10% { transform: translateY(5em) scale(1.5, 0.5); animation-timing-function: linear; } 11%, 31%, 51%, 71%, 91% { transform: translateY(5em) scale(1, 1); animation-timing-function: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0