svg+css实现拍打乒乓球loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:svg+css实现拍打乒乓球loading加载动画效果代码
代码标签: svg 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 { --hue: 223; --bg: hsl(var(--hue),90%,90%); --fg: hsl(var(--hue),90%,10%); --primary: hsl(var(--hue),90%,50%); --trans-dur: 0.3s; font-size: calc(16px + (32 - 16) * (100vw - 320px) / (2560 - 320)); } body { background-color: var(--bg); color: var(--fg); display: flex; font: 1em/1.5 sans-serif; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } .ping-pong { display: block; margin: auto; width: 8em; height: 8em; } .ping-pong__ball-x, .ping-pong__ball-y, .ping-pong__paddle-x, .ping-pong__paddle-y { animation: ping-pong-ball-x 1.5s linear infinite; } .ping-pong__ball-y { animation-name: ping-pong-ball-y; } .ping-pong__paddle-x { animation-name: ping-pong-paddle-x; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } .ping-pong__paddle-y { animation-name: ping-pong-paddle-y; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),90%,10%); --fg: hsl(var(--hue),90%,90%); } } /* Animation */ @keyframes ping-pong-ball-x { from, to { transform: translate(40px, 80px); } 50% { transform: translate(88px, 80px); } } @keyframes ping-pong-ball-y { from, 50%, to { animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); transform: translate(0, 0); } 25%, 75% { animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); transform: translate(0, -68px); } } @keyframes ping-pong-paddle-x { from, to { transform: translate(36px, 92px) rotate(6deg); } 50% { transform.........完整代码请登录后点击上方下载按钮下载查看
网友评论0