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"> <style> body { background: #9148F6; overflow: hidden; } svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 250px; width: 250px; } .spinner { fill: #A1EA2A; } .spinner:nth-of-type(2) { fill: #C47BC3; } .spinner:nth-of-type(3) { fill:#F7AE90; } .spinner:nth-of-type(4) { fill: #D4E15D; } </style> </head> <body translate="no"> <svg viewBox="0 0 250 250"> <g transform="translate(75 75)" class="spinner"> <g> <path d="M 36 42 C 40 34 32 28 32 20 A 1 1 0 0 1 68 20 C 68 28 60 34 64 42 C 68.856 49.34 78.053 45.412 84.981 49.412 A 1 1 0 0 1 66.981 80.588 C 60.053 76.588 58.856 66.66 50 66 C 41.144 66.66 39.947 76.588 33.019 80.588 A 1 1 0 0 1 15.019 49.412 C 21.947 45.412 31.144 49.34 36 42 M 78.481 60.67 A 1 1 0 0 0 73.481 69.33 A 1 1 0 0 0 78.481 60.67 M 45 20 A 1 1 0 0 0 55 20 A 1 1 0 0 0 45 20 M 26.519 69.33 A 1 1 0 0 0 21.519 60.67 A 1 1 0 0 0 26.519 69.33" stroke="rgba(0,0,0,0.3)" stroke-width="2" /> <g id="bearing0"> <circle cx="50" cy="20" r="10" fill="none" stroke="silver" stroke-width="2" /> <circle cx="50" cy="20" r="7" fill="none" stroke="#111" stroke-width="4" /> <circle cx="50" cy="20" r="5" fill="none" stroke="silver" stroke-width="2" /> </g> <use href="#bearing0" transform="rotate(120 50 50)" /> <use href="#bearing0" transform="rotate(240 50 50)" /> <circle cx="50" cy="50" r="12" stroke="rgba(0,0,0,0.3)" stroke-width="1.2" /> <animateTransform class="ballAnim" attributeName="transform" attributeType="XML" type="rotate" values="37 50 50; 1837 50 50" dur="4000ms" begin="0s" repeatCount="indefinite" fill="freeze" keyTimes="0;1" keySplines="0.25 0.1 0.25 1" calcMode="spline" /> </g> </g> <g transform="translate(75 5)" class="spinner"> <g> <path d="M 36 42 C 40 34 32 28 32 20 A 1 1 0 0 1 68 20 C 68 28 60 34 64 42 C 68.856 49.34 78.053 45.412 84.981 49.412 A 1 1 0 0 1 66.981 80.588 C 60.053 76.588 58.856 66.66 50 66 C 41.144 66.66 39.947 76.588 33.019 80.588 A 1 1 0 0 1 15.019 49.412 C 21.947 45.412 31.144 49.34 36 42 M 78.481 60.67 A 1 1 0 0 0 73.481 69.33 A 1 1 0 0 0 78.481 60.67 M 45 20 A 1 1 0 0 0 55 20 A 1 1 0 0 0 45 20 M 26.519 69.33 A 1 1 0 0 0 21.519 60.67 A 1 1 0 0 0 26.519 69.33" stroke="rgba(0,0,0,0.3)" stroke-width="2" /> <g id="bearing1"> <circle cx="50" cy="20" r="10" fill="none" stroke="silver" stroke-width="2" /> <circle cx="50" cy="20" r="7" fill="none" stroke="#111" stroke-width="4" /> <circle cx="50" cy="20" r="5" fill="none" stroke="silver" stroke-width="2" /> </g> <use href="#bearing1" transform="rotate(120 50 50)" /> <use href="#bearing1" transform="rotate(240 50 50)" /> <circle cx="50" cy="50" r="12" stroke="rgba(0,0,0,0.3)" stroke-width="1.2" /> <animateTransform class="ballAnim" attributeName="transfor.........完整代码请登录后点击上方下载按钮下载查看
网友评论0