css路径动画实现运动效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> main { width: 500px; height: 310px; position: relative; } div { display: none; position: absolute; will-change: offset-distance; border-radius: 30%; width: 8px; height: 4px; border: 3px solid currentColor; color: hsl(143,100%,50%); clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 20% 50%); offset-path: path("M20,10 H480 L 490,20 V 280 L 480,290 H20 L 10,280 V 20 z M60,290 l40,-60 h300 l30,60 M150,100 a30,30 1 1,0 .1,0 M350,100 a30,30 1 1,0 .1,0 M150,80 a50,50 1 1,0 .1,0 M350,40 a90,90 1 1,0 .1,0 M102,118 L 30,260 c-5,20 10,20 20,20 h 410 c15,0 10,-20 10,-20 L435,100"); //animation: play 12000ms infinite alternate ease-in-out; } div:nth-of-type(3n+2) { color: hsl(163,100%,50%) } div:nth-of-type(3n+3) { color: hsl(183,100%,50%) } @keyframes play { 100% { offset-path: path("M20,10 H480 L 490,20 V 280 L 480,290 H20 L 10,280 V 20 z M60,290 l40,-60 h300 l30,60 M150,100 a30,30 1 1,0 .1,0 M350,100 a30,30 1 1,0 .1,0 M150,40 a90,90 1 1,0 .1,0 M350,80 a50,50 1 1,0 .1,0 M61,118 L 30,260 c-5,20 10,20 20,20 h 410 c15,0 10,-20 10,-20 L390,100"); } } body { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; background: #16161c; background: radial-gradient(circle, #46465c, #16161c); color: #efefff; font-family: -apple-system, "Segoe UI", "Roboto", sans-serif; overflow-x: hidden; } main { margin-top: 20px; transform-origin: 50% 25%; z-index: -1; //animation: spin 20s 0s infinite alternate ease-in-out; } @keyframes spin { 0% { transform: translateY(10%) scale(1) rotateZ(-6deg); } 100% { transform: translateY(10%) scale(1) rotateZ(6deg); } } aside { color: #efefff; position: absolute; bottom: 0; padding: .5rem 1rem; line-height: 1.4; left: 0; text-align: center; width: 100%; } form { display: flex; flex-direction: column; align-items: center; display: none; } label { padding-bottom: .5rem; } input { width: 15rem; position: relative; } input::before { content: '1x'; position: absolute; left: -1.25rem; color: #efefff; opacity: .8; } input::after { content: attr(max) 'x'; position: absolute; left: calc(100% + 0.5rem); color: #efefff; opacity: .8; } @supports (motion-offset: 100%) or (offset-distance: 100%) { svg, aside { display: none; } div { display: block; } form { display: flex; } } * { box-sizing: border-box; } </style> </head> <body translate="no"> <form> <label for="playback-rate">拖动试试</label> <input type="range" id="playback-rate" min="1" max="1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0