css实现牛顿摆摆动loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现牛顿摆摆动loading加载动画效果代码
代码标签: css 牛顿摆 摆动 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --background: #222; --cradle--default: #aaa; --cradle--highlight: #fff; --cradle--node-size: 4px; --cradle--node-gap: 24px; --cradle--fly-out: 1000%; --cradle--nudge: 100%; --cradle--animation-duration: 1000ms; --cradle--end-opacity: 0; } html, body, .container { height: 100%; } .container { background-color: var(--background); display: grid; align-items: center; justify-content: center; } .cradle { display: flex; gap: var(--cradle--node-gap); } .node { background-color: var(--cradle--default); height: var(--cradle--node-size); width: var(--cradle--node-size); border-radius: var(--cradle--node-size); -webkit-animation-duration: calc(var(--cradle--animation-duration) / 2); animation-duration: calc(var(--cradle--animation-duration) / 2); -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; transform-origin: center center; } .node:not(:first-child):not(:last-child) { -webkit-animation-duration: var(--cradle--animation-duration), calc(var(--cradle--animation-duration) / 2); animation-duration: var(--cradle--animation-duration), calc(var(--cradle--animation-duration) / 2); -webkit-animation-name: nudge, pulse; animation-name: nudge, pulse; -webkit-animation-iteration-count: infinite, infinite; animation-iteration-count: infinite, infinite; } .node:first-child, .node:last-child { -webkit-animation-duration: var(--cradle--animation-duration), calc(var(--cradle--animation-duration) / 2); animation-duration: var(--cradle--animation-duration), calc(var(--cradle--animation-duration) / 2); -webkit-animation-name: swing, pulse; animation-name: swing, pulse; -webkit-animation-iteration-count: infinite, infinite; animation-iteration-count: infinite, infinite; } .node:first-child { --fly-out: calc(var(--cradle--fly-out) * -1); --nudge: calc((var(--cradle--nudge) * -1)); } .node:last-child { --fly-out: var(--cradle--fly-out); --nudge: calc(var(--cradle--nudge) * 2); -webkit-animation-delay: calc(var(--cradle--animation-duration) / 2); animation-delay: calc(var(--cradle--animation-duration) / 2); } @-webkit-keyframes nudge { 0% { transform: translateX(calc(var(--cradle--nudge) - 50%)); } 50% { transform: translateX(calc(var(--cradle-nudge) * -1 - 50%)); } 100% { transform: translateX(calc(var(--cradle--nudge) - 50%)); } } @keyframes nudge { 0% { transform: translateX(calc(var(--cradle--nudge) - 50%)); } 50% { transform: translateX(calc(var(--cradle-nudge) * -1 - 50%)); } 100% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0