div+css实现牛顿小球圆环钟摆loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现牛顿小球圆环钟摆loading加载动画效果代码
代码标签: div css 牛顿 小球 圆环 钟摆 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .ring { --l: 5; width: 30vmin; aspect-ratio: 1; border-radius: 100vmax; border: 0.5vmin double color-mix(in lab, currentcolor 40%, #0000); position: relative; } .dot { --del: 8s; --clr: hsl(calc(var(--i) * 360deg / var(--t) ) 75% calc(var(--l) * 6% + 15%)); position: absolute; background-color: var(--clr); border: 1px solid; border-radius: 100vmax; width: 4vmin; aspect-ratio: 1; offset-path: border-box; animation: followpath var(--del) ease-out infinite calc((var(--del) / (-1 * var(--t))) * var(--i)); } @keyframes followpath { 100% { offset-distance: 100%; } } body { min-height: 100vh; margin: 0; display: grid; place-content: center; color: #1f2020; background-color: #F9F6EF; background-i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0