css+svg实现动态月娥logo效果代码
代码语言：html
所属分类：动画
代码描述：css+svg实现动态月娥logo效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html {
height: 100%;
}
body {
margin: 0;
background-color: #1D2933;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.moth {
height: 100%;
width: auto;
}
</style>
</head>
<body >
<svg class='moth' fill='none' viewbox='0 0 440 440' xmlns='http://www.w3.org/2000/svg'>
<circle cx='220' cy='223' r='149' stroke-width='2' stroke='#EDC791'></circle>
<circle cx='220' cy='224' r='99' stroke-width='2' stroke='#EDC791'></circle>
<path d='M220 125.45L268.066 175.899L268.083 175.917L268.101 175.934L318.55 224L268.101 272.066L268.083 272.083L268.066 272.101L220 322.55L171.934 272.101L171.917 272.083L171.899 272.066L121.45 224L171.899 175.934L171.917 175.917L171.934 175.899L220 125.45Z' stroke-width='2' stroke='#EDC791'></path>
<circle cx='70' cy='222' fill='#FFD7D7' r='13' stroke-width='2' stroke='#ECC390'></circle>
<circle cx='370' cy='224' fill='#FFD7D7' r='13' stroke-width='2' stroke='#ECC390'></circle>
<circle cx='220' cy='72' fill='#FFD7D7' r='13' stroke-width='2' stroke='#ECC390'></circle>
<circle cx='220' cy='374' fill='#FFD7D7' r='14' stroke-width='2' stroke='#ECC390'></circle>
<path d='M164.086 128.271L167.892 126.155L168.693 127.595L163.095 130.708L158.257 122.009L160.05 121.013L164.086 128.271Z' fill='#EDC791'></path>
<path d='M177.67 112.743L180.132 118.819C180.541 119.828 180.547 120.755 180.152 121.599C179.76 122.441 179.018 123.083 177.924 123.527C176.847 123.963 175.876 124.025 175.011 123.711C174.147 123.398 173.506 122.745 173.089 121.754L170.599 115.608L172.5 114.838L174.967 120.926C175.212 121.53 175.534 121.913 175.934 122.076C176.337 122.232 176.794 122.207 177.305 122C178.374 121.567 178.689 120.785 178.25 119.655L175.763 113.516L177.67 112.743Z' fill='#EDC791'></path>
<path d='M196.098 117.621L194.113 118.136L188.605 112.799L190.249 119.138L188.264 119.653L185.765 110.018L187.75 109.503L193.268 114.852L191.621 108.499L193.6 107.986L196.098 117.621Z' fill='#EDC791'></path>
<path d='M207.982 113.641L204.413 114.081L203.985 116.2L201.821 116.466L204.282 106.135L206.168 105.903L211.082 115.326L208.918 115.592L207.982 113.641ZM204.76 112.364L207.229 112.06L205.533 108.515L204.76 112.364Z' fill='#EDC791'></path>
<path d='M229.864 105.39L231.683 112.829L234.938 105.902L237.618 106.173L236.618 116.076L234.571 115.869L234.844 113.162L235.52 108.51L232.102 115.62L230.701 115.478L228.779 107.836L228.512 112.523L228.239 115.23L226.198 115.024L227.198 105.121L229.864 105.39Z' fill='#EDC791'></path>
<path d='M252.861 114.754C252.623 115.705 252.247 116.496 251.732 117.128C251.217 117.76 250.596 118.193 249.871 118.425C249.151 118.658 248.386 118.673 247.577 118.471C246.777 118.271 246.111 117.9 245.579 117.359C245.047 116.817 244.698 116.147 244.531 115.349C244.365 114.547 244.396 113.681 244.624 112.751L244.743 112.274C244.981 111.323 245.36 110.53 245.881 109.894C246.407 109.256 247.03 108.822 247.749 108.593C248.475 108.361 249.239 108.345 250.044 108.547C250.849 108.748 251.514 109.121 252.04 109.666C252.572 110.207 252.917 110.883 253.076 111.693C253.241 112.5 253.205 113.377 252.969 114.323L252.861 114.754ZM250.954 113.812C251.207 112.8 251.218 111.985 250.987 111.368C250.756 110.752 250.305 110.359 249.633 110.191C248.965 110.024 248.385 110.156 247.892 110.588C247.4 111.014 247.026 111.729 246.771 112.731L246.653 113.202C246.407 114.188 246.397 114.998 246.624 115.633C246.85 116.267 247.304 116.669 247.985 116.84C248.652 117.007 249.23 116.874 249.719 116.442C250.209 116.005 250.581 115.286 250.836 114.283L250.954 113.812Z' fill='#EDC791'></path>
<path d='M267.983 116.391L265.143 115.284L262.13 123.009L260.219 122.264L263.232 114.538L260.43 113.446L261.033 111.898L268.587 114.844L267.983 116.391Z' fill='#EDC791'></path>
<path d='M277.79 130.629L275.989 129.648L278.029 125.902L274.517 123.989L272.477 127.735L270.676 126.755L275.437 118.014L277.238 118.995L275.309 122.537L278.82 124.45L280.75 120.908L282.551 121.889L277.79 130.629Z' fill='#EDC791'></path>
<g>
<circle cx='72' cy='154' fill='#EDC791' r='2'></circle>
<circle cx='72' cy='154' fill='#EDC791' r='2'></circle>
<circle cx='72' cy='154' fill='#EDC791' r='2'></circle>
<circle cx='72' cy='154' fill='#EDC791' r='2'></circle>
<circle cx='93' cy='132' fill='#EDC791' r='2'></circle>
<circle cx='93' cy='132' fill='#EDC791' r='2'></circle>
<circle cx='93' cy='132' fill='#EDC791' r='2'></circle>
<circle cx='93' cy='132' fill='#EDC791' r='2'></circle>
<circle cx='364' cy='164' fill='#EDC791' r='2'></circle>
<circle cx='178' cy='379' fill='#EDC791' r='2'></circle>
<circle cx='260' cy='372' fill='#EDC791' r='2'></circle>
<circle cx='375' cy='247' fill='#EDC791' r='2'></circle>
<circle cx='241' cy='379' fill='#EDC791' r='2'></circle>
<circle cx='165' cy='368' fill='#EDC791' r='2'></circle>
<circle cx='258' cy='71' fill='#EDC791' r='2'></circle>
<circle cx='307' cy='355' fill='#EDC791' r='2'></circle>
<circle cx='369' cy='273' fill='#EDC791' r='2'></circle>
<circle cx='372' cy='259' fill='#EDC791' r='2'></circle>
<circle cx='354' cy='144' fill='#EDC791' r='2'></circle>
<circle cx='82' cy='290' fill='#EDC791' r='2'></circle>
<circle cx='133' cy='353' fill='#EDC791' r='2'></circle>
<circle cx='340' cy='326' fill='#EDC791' r='2'></circle>
<circle cx='287' cy='364' fill='#EDC791' r='2'></circle>
<circle cx='348' cy='309' fill='#EDC791' r='2'></circle>
<circle cx='161' cy='68' fill='#EDC791' r='2'></circle>
<circle cx='182' cy='70' fill='#EDC791' r='2'></circle>
<circle cx='105' cy='337' fill='#EDC791' r='2'></circle>
<circle cx='129' cy='94' fill='#EDC791' r='2'></circle>
<circle cx='360' cy='288' fill='#EDC791' r='2'></circle>
<circle cx='135' cy='366' fill='#EDC791' r='2'></circle>
<circle cx='73' cy='275' fill='#EDC791' r='2'></circle>
<circle cx='373' cy='203' fill='#EDC791' r='2'></circle>
<circle cx='86' cy='299' fill='#EDC791' r='2'></circle>
<circle cx='307' cy='93' fill='#EDC791' r='2'></circle>
<circle cx='101' cy='122' fill='#EDC791' r='2'></circle>
<circle cx='377' cy='182' fill='#EDC791' r='2'></circle>
<circle cx='298' cy='86' fill='#EDC791' r='2'></circle>
<circle cx='65' cy='243' fill='#EDC791' r='2'></circle>
<circle cx='344' cy='130' fill='#EDC791' r='2'></circle>
<circle cx='68' cy='183' fill='#EDC791' r='2'></circle>
<circle cx='118' cy='105' fill='#EDC791' r='2'></circle>
<circle cx='346' cy='317' fill='#EDC791' r='2'></circle>
<circle cx='69' cy='257' fill='#EDC791' r='2'></circle>
<circle cx='144' cy='86' fill='#EDC791' r='2'></circle>
<circle cx='285' cy='75' fill='#EDC791' r='2'></circle>
<circle cx='247' cy='68' fill='#EDC791' r='2'></circle>
<circle cx='65' cy='198' fill='#EDC791' r='2'></circle>
<circle cx='200' cy='66' fill='#EDC791' r='2'></circle>
<circle cx='355' cy='312' fill='#EDC791' r='1'></circle>
<animatetransform attributename='transform' attributetype='XML' dur='70s' from='0 221 221' repeatcount='indefinite' to='360 221 221' type='rotate'></animatetransform>
</g>
<g>
<circle cx='355' cy='312' fill='#EDC791' r='1'></circle>
<circle cx='355' cy='312' fill='#EDC791' r='1'></circle>
<circle cx='355' cy='312' fill='#EDC791' r='1'></circle>
<circle cx='101' cy='325' fill='#EDC791' r='1'></circle>
<circle cx='101' cy='325' fill='#EDC791' r='1'></circle>
<circle cx='101' cy='325' fill='#EDC791' r='1'></circle>
<circle cx='101' cy='325' fill='#EDC791' r='1'></circle>
<circle cx='121' cy='349' fill='#EDC791' r='1'></circle>
<circle cx='143' cy='362' fill='#EDC791' r='1'></circle>
<circle cx='85' cy='310' fill='#EDC791' r='1'></circle>
<circle cx='67' cy='172' fill='#EDC791' r='1'></circle>
<circle cx='71' cy='285' fill='#EDC791' r='1'></circle>
<circle cx='70' cy='265' fill='#EDC791' r='1'></circle>
<circle cx='192' cy='380' fill='#EDC791' r='1'></circle>
<circle cx='106' cy='109' fill='#EDC791' r='1'></circle>
<circle cx='364' cy='152' fill='#EDC791' r='1'></circle>
<circle cx='370' cy='174' fill='#EDC791' r='1'></circle>
<circle cx='89' cy='138' fill='#EDC791' r='1'></circle>
<circle cx='75' cy='165' fill='#EDC791' r='1'></circle>
<circle cx='79' cy='153' fill='#EDC791' r='1'></circle>
<circle cx='95' cy='317' fill='#EDC791' r='1'></circle>
<circle cx='170' cy='73' fill='#EDC791' r='1'></circle>
<circle cx='337' cy='110' fill='#EDC791' r='1'></circle>
<circle cx='315' cy='98' fill='#EDC791' r='1'></circle>
<circle cx='300' cy='364' fill='#EDC791' r='1'></circle>
<circle cx='357' cy='301' fill='#EDC791' r='1'></circle>
<circle cx='77' cy='141' fill='#EDC791' r='1'></circle>
<circle cx='278' cy='375' fill='#EDC791' r='1'></circle>
<circle cx='244' cy='387' fill='#EDC791' r='1'></circle>
<circle cx='205' cy='385' fill='#EDC791' r='1'></circle>
<circle cx='153' cy='365' fill='#EDC791' r='1'></circle>
<circle cx='155' cy='79' fill='#EDC791' r='1'></circle>
<circle cx='134' cy='86' fill='#EDC791' r='1'></circle>
<circle cx='381' cy='195' fill='#EDC791' r='1'></circle>
<circle cx='378' cy='266' fill='#EDC791' r='1'></circle>
<circle cx='383' cy='238' fill='#EDC791' r='1'></circle>
<circle cx='371' cy='284' fill='#EDC791' r='1'></circle>
<circle cx='85' cy='147' fill='#EDC791' r='1'></circle>
<circle cx='317' cy='346' fill='#EDC791' r='1'></circle>
<circle cx='329' cy='339' fill='#EDC791' r='1'></circle>
<circle cx='327' cy='106' fill='#EDC791' r='1'></circle>
<circle cx='59' cy='189' fill='#EDC791' r='1'></circle>
<circle cx='271' cy='72' fill='#EDC791' r='1'></circle>
<circle cx='237' cy='63' fill='#EDC791' r='1'></circle>
<circle cx='191' cy='61' fill='#EDC791' r='1'></circle>
<circle cx='326' cy='348' fill='#EDC791' r='1'></circle>
<circle cx='114' cy='340' fill='#EDC791' r='1'></circle>
<circle cx='57' cy='244' fill='#EDC791' r='1'></circle>
<circle cx='355' cy='134' fill='#EDC791' r='1'></circle>
<circle cx='200' cy='58' fill='#EDC791' r='1'></circle>
<circle cx='339' cy='121' fill='#EDC791' r='1'></circle>
<animatetransform attributename='transform' attributetype='XML' dur='50s' from='0 220 220' repeatcount='indefinite' to='360 220 220' type='rotate'></animatetransform>
</g>
<g>
<circle cx='55.5' cy='179.5' fill='#EDC791' r='0.5'></circle>
<circle cx='191.5' cy='71.5' fill='#EDC791' r='0.5'></circle>
<circle cx='66.5' cy='208.5' fill='#EDC791' r='0.5'></circle>
<circle cx='57.5' cy='196.5' fill='#EDC791' r='0.5'></circle>
<circle cx='63.3049' cy='191.988' fill='#EDC791' r='0.5'></circle>
<circle cx='63.5' cy='155.5' fill='#EDC791' r='0.5'></circle>
<circle cx='67.5' cy='188.5' fill='#EDC791' r='0.5'></circle>
<circle cx='171.5' cy='64.5' fill='#EDC791' r='0.5'></circle>
<circle cx='72.3779' cy='179.305' fill='#EDC791' r='0.5'></circle>
<circle cx='83.5' cy='154.5' fill='#EDC791' r='0.5'></circle>
<circle cx='72.5' cy='171.5' fill='#EDC791' r='0.5'></circle>
<circle cx='64.5' cy='176.5' fill='#EDC791' r='0.5'></circle>
<circle cx='81.4512' cy='166.622' fill='#EDC791' r='0.5'></circle>
<circle cx='83.7195' cy='163.451' fill='#EDC791' r='0.5'></circle>
<circle cx='62.5' cy='202.5' fill='#EDC791' r='0.5'></circle>
<circle cx='198.5' cy='376.5' fill='#EDC791' r='0.5'></circle>
<circle cx='208.5' cy='378.5' fill='#EDC791' r='0.5'></circle>
<circle cx='381.5' cy='243.5' fill='#EDC791' r='0.5'></circle>
<circle cx='69.5' cy='191.5' fill='#EDC791' r='0.5'></circle>
<circle cx='67.5' cy='164.5' fill='#EDC791' r='0.5'></circle>
<circle cx='83.5' cy='125.5' fill='#EDC791' r='0.5'></circle>
<circle cx='73.5' cy='146.5' fill='#EDC791' r='0.5'></circle>
<circle cx='79.5' cy='160.5' fill='#EDC791' r='0.5'></circle>
<circle cx='83.5' cy='141.5' fill='#EDC791' r='0.5'></circle>
<circle cx='84.5' cy='133.5' fill='#EDC791' r='0.5'></circle>
<circle cx='90.5' cy='113.5' fill='#EDC791' r='0.5'></circle>
<circle cx='90.5' cy='122.5' fill='#EDC791' r='0.5'></circle>
<circle cx='97.5' cy='127.5' fill='#EDC791' r='0.5'></circle>
<circle cx='107.5' cy='117.5' fill='#EDC791' r='0.5'></circle>
<circle cx='108.5' cy='101.5' fill='#EDC791' r='0.5'></circle>
<circle cx='98.5' cy='114.5' fill='#EDC791' r='0.5'></circle>
<circle cx='120.012' cy='112.72' fill='#EDC791' r='0.5'></circle>
<circle cx='112.5' cy='111.5' fill='#EDC791' r='0.5'></circle>
<circle cx='120.5' cy='94.5' fill='#EDC791' r='0.5'></circle>
<circle cx='125.5' cy='102.5' fill='#EDC791' r='0.5'></circle>
<circle cx='135.5' cy='93.5' fill='#EDC791' r='0.5'></circle>
<circle cx='141.5' cy='92.5' fill='#EDC791' r='0.5'></circle>
<circle cx='142.5' cy='78.5' fill='#EDC791' r='0.5'></circle>
<circle cx='151.5' cy='85.5' fill='#EDC791' r='0.5'></circle>
<circle cx='124.5' cy='82.5' fill='#EDC791' r='0.5'></circle>
<circle cx='181.5' cy='63.5' fill='#EDC791' r='0.5'></circle>
<circle cx='148.5' cy='70.5' fill='#EDC791' r='0.5'></circle>
<circle cx='175.5' cy='54.5' fill='#EDC791' r='0.5'></circle>
<circle cx='162.5' cy='77.5' fill='#EDC791' r='0.5'></circle>
<circle cx='57.5' cy='236.5' fill='#EDC791' r='0.5'></circle>
<circle cx='61.5' cy='249.5' fill='#EDC791' r='0.5'></circle>
<circle cx='73.5' cy='288.5' fill='#EDC791' r='0.5'></circle>
<circle cx='78.5' cy='296.5' fill='#EDC791' r='0.5'></circle>
<circle cx='89.5' cy='306.5' fill='#EDC791' r='0.5'></circle>
<circle cx='65.5' cy='277.5' fill='#EDC791' r='0.5'></circle>
<circle cx='65.5' cy='270.5' fill='#EDC791' r='0.5'></circle>
<circle cx='89.5' cy='313.5' fill='#EDC791' r='0.5'></circle>
<circle cx='58.5' cy='208.5' fill='#EDC791' r='0.5'></circle>
<circle cx='98.5' cy='334.5' fill='#EDC791' r='0.5'></circle>
<circle cx='64.5' cy='284.5' fill='#EDC791' r='0.5'></circle>
<circle cx='76.5' cy='304.5' fill='#EDC791' r='0.5'></circle>
<circle cx='107.5' cy='332.5' fill='#EDC791' r='0.5'></circle>
<circle cx='65.5' cy='233.5' fill='#EDC791' r='0.5'></circle>
<circle cx='72.9634' cy='274.451' fill='#EDC791' r='0.5'></circle>
<circle cx='76.061' cy='278.915' fill='#EDC791' r='0.5'></circle>
<circle cx='74.5' cy='268.5' fill='#EDC791' r='0.5'></circle>
<circle cx='62.5' cy='218.5' fill='#EDC791' r='0.5'></circle>
<circle cx='85.3538' cy='292.305' fill='#EDC791' r='0.5'></circle>
<circle cx='89.5' cy='322.5' fill='#EDC791' r='0.5'></circle>
<circle cx='101.5' cy='318.5' fill='#EDC791' r='0.5'></circle>
<circle cx='65.5' cy='224.5' fill='#EDC791' r='0.5'></circle>
<circle cx='51.5' cy='254.5' fill='#EDC791' r='0.5'></circle>
<circle cx='65.5' cy='261.5' fill='#EDC791' r='0.5'></circle>
<circle cx='80.5' cy='313.5' fill='#EDC791' r='0.5'></circle>
<circle cx='88.5' cy='333.5' fill='#EDC791' r='0.5'></circle>
<circle cx='113.5' cy='335.5' fill='#EDC791' r='0.5'></circle>
<circle cx='120.5' cy='341.5' fill='#EDC791' r='0.5'></circle>
<circle cx='110.5' cy='349.5' fill='#EDC791' r='0.5'></circle>
<circle cx='126.5' cy='346.5' fill='#EDC791' r='0.5'></circle>
<circle cx='126.5' cy='359.5' fill='#EDC791' r='0.5'></circle>
<circle cx='172.5' cy='370.5' fill='#EDC791' r='0.5'></circle>
<circle cx='148.5' cy='360.5' fill='#EDC791' r='0.5'></circle>
<circle cx='136.5' cy='359.5' fill='#EDC791' r='0.5'></circle>
<circle cx='141.5' cy='373.5' fill='#EDC791' r='0.5'></circle>
<circle cx='169.5' cy='386.5' fill='#EDC791' r='0.5'></circle>
<circle cx='164.5' cy='377.5' fill='#EDC791' r='0.5'></circle>
<circle cx='184.5' cy='381.5' fill='#EDC791' r='0.5'></circle>
<circle cx='197.5' cy='385.5' fill='#EDC791' r='0.5'></circle>
<circle cx='183.5' cy='372.5' fill='#EDC791' r='0.5'></circle>
<circle cx='219.5' cy='378.5' fill='#EDC791' r='0.5'></circle>
<circle cx='229.5' cy='382.5' fill='#EDC791' r='0.5'></circle>
<circle cx='232.5' cy='375.5' fill='#EDC791' r='0.5'></c.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0