loading加载动画效果
代码语言:html
所属分类:加载滚动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Loading #2</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } .wrapper { width: 100px; height: 100px; background: #2c3e50; position: relative; overflow: hidden; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .wrapper .belt { position: absolute; top: 60%; left: 0%; transform: translate(-50%, -50%); width: 200px; height: 5px; background: #fff; animation: belt 2s linear infinite; z-index: 2; } .wrapper .belt .t { width: 5px; height: 2px; background: #fff; position: absolute; top: -2px; left: calc(20px * var(--index)); } .wrapper .box { width: 20px; height: 20px; background: #fff; position: absolute; left: 50%; top: -10%; transform: translate(-50%, -50%); animation: box 2s infinite; animation-delay: calc(1s + (1s * var(--index))); z-index: 1; } @keyframes belt { to { left: 100%; } } @keyframes box { 25% { top: 52%; animation-timing-function: cubuc-bezier(0.27, 0.37, 0.43, 0.07); } 35% { top: 52%; left: 52%; animation-timing-function: cubic-bezier(0.33, 0.9, 0.86, 0.62); } 50% { top: 52%; left: 55%; animation-timing-function: linear; } 75% { top: 52%; left: 75%; animation-timing-function: linear; } 100% {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0