使用CSS动画移动svg圆

时间:2020-10-05 17:36:36

标签: css

我正在尝试使用css动画在整个虚线cirlce上移动svg圆,但是问题是,当我使用此代码时,它开始移动而不是在所有虚线圆上移动,有什么帮助吗?

 #c1{
   animation: moving 1s infinite linear;
   /* motion-rotation: reverse; */
 }

 @-webkit-keyframes moving{

  50% {transform: rotate(0.5deg)}
    100% {transform: rotate(0.5deg)}

}
      <svg id="eedf7e36-f7ba-41f3-811a-5462d78ed19b" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"  
                viewBox="0 0 910.88794 653.61419">
                <rect y="646.47623" width="431.1819" height="1.87469" fill="#3f3d56"/>
                <polygon points="109.607 639.942 121.866 639.942 127.699 592.654 109.605 592.654 109.607 639.942" fill="#ffb8b8"/>
                <path d="M251.53582,759.63143h38.53073a0,0,0,0,1,0,0V774.5183a0,0,0,0,1,0,0H266.42267a14.88685,14.88685,0,0,1-14.88685-14.88685v0A0,0,0,0,1,251.53582,759.63143Z" transform="translate(397.08134 1410.94447) rotate(179.99738)" fill="#2f2e41"/><polygon points="44.379 637.585 56.532 639.205 68.564 593.103 50.629 590.712 44.379 637.585" fill="#ffb8b8"/><path d="M185.6415,759.43939h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H200.52836a14.88686,14.88686,0,0,1-14.88686-14.88686v0a0,0,0,0,1,0,0Z" transform="translate(162.1087 1430.92651) rotate(-172.40554)" fill="#2f2e41"/><polygon points="61.796 444.64 130.796 447.64 127.796 622.64 109.796 620.64 95.796 501.64 62.796 628.64 44.796 625.64 61.796 444.64" fill="#2f2e41"/><path d="M252.35236,463.83242l-24-4.90286-15,109.90286s44,29,58-1Z" transform="translate(-144.55603 -123.1929)" fill="#11067d"/><circle cx="97.32782" cy="303.17101" r="24.56103" fill="#ffb8b8"/><path d="M228.35236,457.83242l-35,11s17,85-11,129c0,0,35,37,50-46C232.35236,551.83242,244.35236,484.83242,228.35236,457.83242Z" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/><path d="M252.35236,463.83242l26,16s14,117,0,128S252.35236,463.83242,252.35236,463.83242Z" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/><path d="M289.1621,624.79959a10.0558,10.0558,0,0,1,.96818-15.3889l-10.57065-34.13562,17.83265,5.17981,7.30413,31.62164a10.11027,10.11027,0,0,1-15.53431,12.72307Z" transform="translate(-144.55603 -123.1929)" fill="#ffb8b8"/><path d="M199.338,614.92719a10.05577,10.05577,0,0,1-1.00976-15.38624l-14.85349-32.50158,18.349,2.85437,11.292,30.42646a10.11027,10.11027,0,0,1-13.77778,14.607Z" transform="translate(-144.55603 -123.1929)" fill="#ffb8b8"/><polygon points="57.796 346.64 48.796 345.64 25.796 420.64 48.796 472.64 66.796 461.64 46.796 418.64 62.796 372.64 57.796 346.64" fill="#2f2e41"/>
                <polygon points="128.796 355.64 133.796 356.64 157.796 473.64 141.796 478.64 122.796 409.64 128.796 355.64" fill="#2f2e41"/><path d="M225.00655,436.44921a14.06316,14.06316,0,0,1,8.44415-11.03667c4.7277-1.93846,10.06074-1.11966,15.15695-.7489s10.76991.04877,14.44758-3.49856c3.3597-3.24064,4.11524-8.61848,2.49281-12.99537s-5.29609-7.775-9.46944-9.866a40.79142,40.79142,0,0,0-13.47062-3.56c-6.811-.82288-13.80511-.92776-20.44341.80412s-4.9267,5.44408-8.81681,11.095-5.05548,13.34984-2.08959,19.53611c1.98454,4.13936,5.54088,7.27259,9.004,10.28584" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/>
                <path d="M774.394,707.49843l-.00049-1.87469c3.72742-.00092,7.51117-.07782,11.24732-.227l.07507,1.87286C781.95514,707.42061,778.14618,707.49752,774.394,707.49843Zm-11.31872-.21692c-3.74756-.14648-7.55005-.37072-11.30134-.66638l.1474-1.8692c3.727.29474,7.50434.51721,11.22718.66272Zm33.942-.6911-.14923-1.8692c3.72009-.29748,7.48511-.67553,11.18964-1.12317l.22522,1.86188c-3.72968.45032-7.51984.8302-11.26563,1.13043Zm-56.51025-1.093c-3.738-.44764-7.51026-.97583-11.213-1.56989l.29749-1.85089c3.67755.59039,7.42511,1.11493,11.13794,1.5589Zm78.98608-1.62024-.29932-1.85089c3.67664-.59412,7.399-1.27424,11.06379-2.01935l.37347,1.83624c-3.689.75153-7.43652,1.43536-11.13788,2.034Zm-101.33929-1.97083c-3.68946-.74695-7.4068-1.579-11.05005-2.47064l.4458-1.82159c3.619.887,7.31164,1.7127,10.97589,2.45416Zm123.525-2.54657-.44855-1.81976c3.63-.89343,7.2851-1.87195,10.8642-2.90906l.52179,1.80145C849.01239,697.47591,845.33258,698.46084,841.67883,699.35976Zm-145.51611-2.84045c-3.61487-1.04352-7.253-2.1731-10.81342-3.35761l.59223-1.77948c3.53656,1.17719,7.15051,2.29944,10.74109,3.33564ZM863.42511,693.061l-.59406-1.77771c3.53888-1.18267,7.10248-2.45416,10.59284-3.78051l.66638,1.752C870.57605,690.59035,866.98779,691.871,863.42511,693.061Zm-188.77344-3.70458c-3.51691-1.33283-7.05945-2.75715-10.52966-4.23548l.73462-1.72461c3.4469,1.46826,6.96606,2.88349,10.45965,4.20618Zm209.91052-4.32331-.736-1.72461c3.42718-1.46368,6.8681-3.01526,10.22668-4.61261l.80555,1.69348C891.477,681.99679,888.01227,683.55929,884.56219,685.0331ZM653.775,680.46352c-3.40521-1.61658-6.81915-3.32281-10.14654-5.07214l.87237-1.65869c3.305,1.73645,6.69556,3.43176,10.07788,5.03735Zm251.18836-5.13165-.8733-1.65869c3.30182-1.73743,6.60907-3.5636,9.82941-5.42639l.93921,1.62207c-3.24231,1.87561-6.57153,3.71368-9.89526,5.463Zm-271.265-5.41724c-3.267-1.88843-6.52991-3.86383-9.69849-5.87127l1.00324-1.58362c3.14709,1.99371,6.38849,3.9563,9.63348,5.83282Zm290.8313-5.90423-1.00323-1.58362c3.14251-1.991,6.29418-4.07709,9.36712-6.20172l1.06549,1.5415c-3.093,2.13928-6.26581,4.24-9.42932,6.24384ZM614.548,657.78853c-3.09991-2.142-6.19214-4.37188-9.19092-6.62829l1.12684-1.49756c2.97912,2.24084,6.05065,
                4.45605,9.12957,6.58435Zm328.58582-6.64019-1.12763-1.49756c2.97223-2.23535,5.94818-4.56867,8.84534-6.93585l1.18634,1.45178c-2.9165,2.38275-5.91254,4.73163-8.904,6.98163Zm-346.69251-6.9798c-2.91046-2.37817-5.81268-4.84784-8.6261-7.34137l1.24311-1.40234c2.7951,2.47613,5.6781,4.93023,8.56933,7.29193Zm364.2157-7.33679-1.2431-1.40235c2.79285-2.47522,5.57373-5.041,8.265-7.62512l1.298,1.35291c-2.70856,2.60064-5.50782,5.18292-8.31983,7.67456ZM579.49121,629.149c-2.704-2.59784-5.3985-5.2909-8.00775-8.00409l1.35107-1.29987c2.59235,2.6958,5.26892,5.37146,7.95557,7.951Zm397.49444-7.99677-1.35113-1.29986c2.58411-2.68757,5.15179-5.46759,7.63245-8.2641l1.40234,1.24493C982.17218,615.64712,979.58722,618.44631,976.98565,621.15218Zm-413.18231-8.32263c-2.49945-2.81757-4.96869-5.71655-7.34-8.61652l1.45178-1.18634c2.35483,2.88074,4.808,5.7605,7.29056,8.55793Zm428.212-8.61835-1.45178-1.18634c2.369-2.8963,4.7069-5.87494,6.94958-8.85266L999.01068,595.3C996.75335,598.29781,994.399,601.29568,992.01532,604.2112Zm-442.5391-8.89752c-2.25915-2.99969-4.48767-6.08453-6.62326-9.17029l1.54151-1.06732c2.1214,3.06561,4.33481,6.13031,6.57931,9.10986Zm456.16825-9.20142-1.54151-1.06549c2.12915-3.07934,4.22174-6.23742,6.2182-9.38635l1.58362,1.00324C1009.89459,579.83364,1007.78833,583.01278,1005.64447,586.11226Zm-469.04029-9.3955c-2.00881-3.16724-3.98144-6.41956-5.86349-9.66736l1.62207-.93921c1.8692,3.22583,3.829,6.45618,5.82413,9.60236Zm481.17835-9.74793-1.62207-.93921c1.87653-3.24322,3.70819-6.56146,5.4447-9.86139l1.65869.87329c-1.74756,3.3219-3.592,6.66218-5.48138,9.92731ZM525.27316,557.155c-1.74655-3.31641-3.45007-6.71527-5.063-10.10217l1.69254-.80555c1.60238,3.364,3.29446,6.74,5.02911,10.03443Zm503.06821-10.25684-1.69348-.80554c1.60467-3.37591,3.16357-6.8324,4.63183-10.27423l1.72461.736C1031.526,540.01906,1029.957,543.49935,1028.34137,546.89815Zm-512.781-10.13788c-1.4765-3.45282-2.899-6.97522-4.22861-10.47015l1.752-.66638c1.32089,3.47021,2.73379,6.96973,4.20022,10.39874Zm521.68585-10.73468-1.753-.66455c1.3291-3.50683,2.60334-7.08142,3.7851-10.623l1.77771.59314C1039.867,518.89748,1038.58453,522.495,1037.24621,526.02559ZM507.52014,515.62777c-1.19366-3.5636-2.32965-7.20038-3.37637-10.80792l1.80053-.52179c1.03989,3.58282,2.16809,7.19488,3.35352,10.73468Zm536.90088-11.11-1.80145-.52c1.03436-3.57733,2.0111-7.23242,2.90362-10.8656l1.81976.44672C1046.44494,497.23678,1045.46179,500.91756,1044.421,504.51778Zm-543.212-10.634c-.90072-3.65057-1.73785-7.36609-2.48938-11.045l1.83719-.37531c.746,3.65424,1.57767,7.346,2.472,10.9718Zm548.6109-11.35168-1.83807-.37348c.74146-3.65149,1.41882-7.37433,2.01386-11.06421l1.85089.2984C1051.24792,475.10744,1050.566,478.855,1049.81994,482.53213ZM496.67972,471.70131c-.601-3.70092-1.13553-7.47229-1.58866-11.20977l1.861-.22522c.45038,3.71283.9813,7.45855,1.57859,11.1347Zm556.74319-11.52282-1.86188-.22339c.4458-3.711.822-7.47592,1.11676-11.1901l1.86921.14829c-.29755,3.73935-.6756,7.52948-1.12409,11.26514ZM493.95462,449.22771c-.30255-3.74438-.5332-7.54687-.68561-11.30221l1.87286-.076c.15149,3.73019.3808,7.50751.681,11.22717Zm561.266-11.61484-1.87286-.07415c.14648-3.73569.22149-7.519.22149-11.245l-.00091-.62109h1.87469l.00092.617c.00006,3.7544-.07495,7.56241-.22327,11.32324ZM494.907,426.60448h-1.87469l.00045-.31488c0-3.65695.071-7.36059.21146-11.00335l1.87286.07232c-.13913,3.619-.20962,7.29788-.20962,10.93515Zm558.41419-12.17413c-.15473-3.72241-.38721-7.49973-.69294-11.22626l1.86921-.15286c.30664,3.75168.541,7.55374.69659,11.3013ZM495.774,404.13094l-1.8692-.14645c.29474-3.754.66916-7.54459,1.11219-11.26746l1.86187.22153C496.43851,396.63668,496.06686,400.40258,495.774,404.13094Zm555.71378-12.11554c-.45221-3.69723-.98676-7.443-1.59094-11.1329l1.85089-.30252c.60687,3.71463,1.14606,7.48553,1.6001,11.2084ZM498.4313,381.80016l-1.85092-.2966c.59409-3.71188,1.27194-7.46081,2.01569-11.14157l1.83716.37073C499.695,374.38921,499.02173,378.11254,498.4313,381.80016Zm549.42606-11.97824c-.75244-3.66336-1.5882-7.35327-2.48438-10.96857l1.81977-.45129c.90258,3.63956,1.74383,7.3551,2.50085,11.04272Zm-544.97681-10.066-1.82116-.44488c.8916-3.64872,1.87106-7.33039,2.91091-10.94339l1.80149.51855c-1.03305,3.58878-2.00559,7.24573-2.89127,10.86972Zm539.566-11.76175c-1.04352-3.5805-2.175-7.19125-3.36493-10.73147l1.77765-.59684c1.19733,3.564,2.337,7.199,3.3869,10.80381ZM509.101,338.14373l-1.779-.59134c1.18634-3.56955,2.4642-7.16928,3.7984-10.699l1.75388.66275C511.54873,331.02251,510.27911,334.598,509.101,338.14373Zm526.18176-11.46747c-1.33191-3.48715-2.7489-6.98438-4.21167-10.39508l1.72278-.73871c1.47284,3.43359,2.8999,6.95416,4.241,10.46466Zm-518.20739-9.6225-1.7255-.73413c1.4733-3.46335,3.03861-6.94546,4.652-10.34842l1.69391.8028C520.09292,310.1545,518.5386,313.6133,517.07538,317.05376Zm509.36572-10.99283c-1.60468-3.36038-3.29993-6.73446-5.03919-10.02847l1.65686-.87555c1.752,3.31644,3.45923,6.713,5.074,10.09668Zm-499.71253-9.36847-1.66052-.87054c1.74747-3.33063,3.58829-6.6727,5.4708-9.93375l1.6239.93735c-1.87018,3.23911-3.69864,6.55917-5.43421,9.86691ZM1015.959,286.21224c-1.87469-3.22717-3.83728-6.45575-5.83465-9.59689l1.58178-1.006c2.01111,3.16221,3.98652,6.41272,5.874,9.661Zm-477.96945-9.02338-1.58453-1.00235c2.01111-3.17959,4.11419-6.361,6.25024-9.45544l1.54242,1.065c-2.12189,3.07388-4.21033,6.23377-6.20813,9.39276Zm465.9166-9.931c-2.12641-3.06424-4.34351-6.1271-6.58893-9.10211l1.49573-1.12958c2.261,2.99512,4.49267,6.07813,6.63287,9.16346Zm-453.1287-8.59542-1.4985-1.12592c2.25915-3.007,4.60941-6.00766,6.98529-8.91949l1.4527,1.18542c-2.36029,2.89212-4.695,5.87305-6.93952,8.85995Zm439.58927-9.34012c-2.36444-2.88483-4.82135-5.76142-7.30017-8.54969l1.40051-1.24581c2.49628,2.807,4.96869,5.70282,7.34961,8.60733ZM565.00482,241.229l-1.40329-1.24215c2.48892-2.81208,5.07077-5.614,7.6741-8.32816l1.353,1.298c-2.586,2.69577-5.15088,5.47943-7.62378,8.27227Zm410.42383-8.70987c-2.59418-2.69168-5.2735-5.36367-7.96472-7.94232l1.29712-1.35385c2.70861,2.596,5.40625,5.28589,8.0169,7.99542Zm-394.85358-7.52215-1.29986-1.35111c2.705-2.6029,5.50189-5.18792,8.31213-7.68417l1.24487,1.40143c-2.79193,2.47977-5.57007,5.04834-8.2572,7.63382Zm378.61286-8.03934c-2.80109-2.47656-5.68726-4.92706-8.57715-7.28277l1.18451-1.45316c2.909,2.37177,5.81451,4.83826,8.63391,7.33176Zm-361.8014-6.89007-1.18817-1.45c2.90863-2.38229,5.90192-4.73437,8.89618-6.99168l1.12866,1.49666c-2.97461,2.24222-5.94775,4.57919-8.83673,6.945Zm344.35877-7.32718c-2.99054-2.24453-6.06531-4.45655-9.13642-6.57474l1.06366-1.54334c3.09217,2.13239,6.18708,4.35906,9.19867,6.61869Zm-326.415-6.20356-1.06824-1.54058c3.09033-2.14154,6.26074-4.24555,9.4234-6.25391l1.00507,1.5827c-3.14154,1.99457-6.291,4.0844-9.36023,6.21175Zm307.8822-6.57519c-3.16083-1.99645-6.404-3.95491-9.64081-5.82092l.93738-1.62389c3.257,1.87837,6.5221,3.8501,9.7049,5.85983Zm-288.9223-5.46529-.94055-1.62205c3.24139-1.87975,6.56878-3.7215,9.88885-5.47307l.87512,1.65776c-3.29858,1.74008-6.60357,3.56947-9.82342,5.4373Zm269.41272-5.78476c-3.31091-1.73465-6.70337-3.42582-10.08386-5.02636l.80188-1.69437c3.40338,1.61107,6.81958,3.31367,10.15161,5.06023ZM654.14435,174.0248l-.80689-1.69255c3.38049-1.61153,6.843-3.17775,10.29163-4.65517l.73779,1.72321c-3.42535,1.46728-6.86493,3.023-10.22253,4.62445Zm229.1922-4.95451c-3.4455-1.46324-6.96607-2.8743-10.46466-4.19521l.66271-1.75387c3.52149,1.3296,7.06678,2.75073,10.53425,4.22358ZM674.76471,165.1941l-.66779-1.752c3.50775-1.33739,7.09424-2.62166,10.65961-3.81761l.59588,1.77768c-3.54107,1.1876-7.10333,2.46365-10.5877,3.79187Zm187.4768-4.08673c-3.54254-1.1749-7.15741-2.293-10.74475-3.32331l.51813-1.80146c3.61121,1.03712,7.24982,2.16259,10.81616,3.34527Zm-166.15478-3.06562-.52362-1.79965c3.60522-1.049,7.28418-2.03854,10.93426-2.94157l.45038,1.81978c-3.62585.897-7.28,1.88014-10.861,2.92138Zm144.53943-3.14206c-3.61945-.88287-7.31348-1.70443-10.97864-2.44178l.36981-1.83809c3.68988.74238,7.40863,1.56988,11.0528,2.45826Zm-122.709-2.25692-.37622-1.83626c3.67523-.75246,7.42194-1.44081,11.13611-2.04634l.30206,1.85C725.28924,151.212,721.56775,151.8958,717.91717,152.64277Zm100.66236-2.18044c-3.68671-.58768-7.43476-1.10853-11.1402-1.547l.22058-1.86189c3.73016.44167,7.50342.96573,11.21436,1.558Zm-78.46662-1.4367-.227-1.861c3.72925-.454,7.519-.839,11.2638-1.14285l.152,1.8683c-3.72009.30255-7.48461.68427-11.18872,1.13555Zm56.134-1.20876c-3.71644-.28972-7.49427-.5085-11.22809-.64992l.07141-1.87379c3.75854.1428,7.561.363,11.30224.65449Zm-33.71857-.61377-.07691-1.87286c3.74848-.1547,7.557-.23618,11.31965-.24257l.00274,1.87469c-3.73743.00641-7.52118.08742-11.24542.24074Z" transform="translate(-144.55603 -123.1929)" fill="#ccc"/><circle cx="530.38349" cy="297.68538" r="180.90894" fill="#3f3d56"/><ellipse cx="466.17488" cy="297.68538" rx="96.07861" ry="132.16663" fill="#fff"/><ellipse cx="434.32575" cy="325.68538" rx="26.81427" ry="42.18085" fill="#3f3d56"/><circle cx="885.81702" cy="196.65475" r="17.80969" fill="#11067d"/><circle id="c" cx="680.09215" cy="26.24586" r="26.24586" fill="#11067d"/><circle  id="c1" cx="662.70442" cy="581.35092" r="17.80969" fill="#11067d"/></svg>
            </div>

1 个答案:

答案 0 :(得分:0)

.rotate {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:5s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-name:orbit;
    -moz-animation-duration:5s;
}

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg);  -webkit-transform-origin: 50% 50%; } 
to { -webkit-transform:rotate(360deg);  -webkit-transform-origin: 50% 50%; } 
}
@-moz-keyframes orbit { 
from { -moz-transform:rotate(0deg); -moz-transform-origin: 50% 50%; } 
to { -moz-transform:rotate(360deg); -moz-transform-origin: 50% 50%; } 
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
    <g class="rotate">
        <g>
            <circle fill="#FFFFFF" cx="250" cy="250" r="220.797"/>
            <circle fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7.0069,7.0069" cx="250" cy="250" r="220.797"/>
        </g>
        <circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="363.787" cy="63.876" r="23.894"/>
        <circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="418.655" cy="394.851" r="21.239"/>
        <circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="85.911" cy="105.469" r="21.239"/>
    </g>
    <g>
        <circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="199.608" cy="294.041" r="150.885"/>
        
            <ellipse transform="matrix(0.9889 -0.1488 0.1488 0.9889 -43.6117 23.8941)" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="137.843" cy="303.338" rx="85.912" ry="96.809"/>
        
            <ellipse transform="matrix(0.9889 -0.1488 0.1488 0.9889 -45.7056 14.6961)" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="75.344" cy="312.744" rx="16.372" ry="24.336"/>
    </g>
</g>
</svg>

您的svg代码不正确。因此,我创建了一个新的。我使用了关键帧动画,其中提到了旋转CSS和最重要的变换原点。

相关问题