svg+css实现指尖陀螺仪loading加载动画效果代码-html代码-BFW代码库

svg+css实现指尖陀螺仪loading加载动画效果代码

代码语言：html

代码描述：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 .........完整代码请登录后点击上方下载按钮下载查看