svg+css实现胶囊旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现胶囊旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --animation-speed: 10s; } body { display: flex; justify-content: center; align-items: center; height: 100dvh; background-color: #263238; } .pill { height: 20rem; width: 20rem; .capsule, .shadow { x: 31%; y: 11%; rx: 58; width: 38%; height: 78%; fill: url(#capsule); transform-origin: center; animation: spin var(--animation-speed) linear infinite reverse; } .shadow { fill: #000; filter: blur(0.3rem); opacity: 0.15; animation: shadow-spin var(--animation-speed) linear infinite reverse; } .specular { x: 35%; y: 15%; rx: 50; width: 30%; height: 70%; fill: transparent; stroke: #fff; stroke-width: 1rem; stroke-linecap: round; stroke-dasharray: 100 455; stroke-dashoffset: 100; transform-origin: center; animation: specular-spin var(--animation-speed) linear infinite reverse; } } @keyframes spin { from { trans.........完整代码请登录后点击上方下载按钮下载查看
网友评论0