Блог

Главная - Вопросы по программированию - css анимация вращающееся солнце

css анимация вращающееся солнце

#css #animation #transform

Вопрос:

Как я могу оживить солнечные лучи, чтобы они проходили по окружности части солнца. svg на самом деле является фоновым изображением, если это имеет значение.

 <html>
<body>
  <svg width="305" height="321" viewBox="0 0 305 321" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="sun" clip-path="url(#clip0)">
<style>
#rays {
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
<path id="circle" d="M152.502 241.869C196.066 241.869 231.382 206.561 231.382 163.005C231.382 119.45 196.066 84.1418 152.502 84.1418C108.938 84.1418 73.623 119.45 73.623 163.005C73.623 206.561 108.938 241.869 152.502 241.869Z" fill="#E84855"/>
<path id="rays" d="M305 210.122L245.652 176.037C245.739 175.493 245.827 174.949 245.905 174.405L287.332 160.59L287.06 160.498L287.332 160.405L245.905 146.59C245.827 146.046 245.739 145.502 245.652 144.958L305 110.874L236.956 118.139C236.721 117.668 236.481 117.203 236.241 116.737L261.517 81.2376L219.952 94.3155C219.611 93.9651 219.265 93.6194 218.919 93.2737L245.163 32.5218L195.953 76.5495C195.446 76.2868 194.939 76.0286 194.427 75.7751L194.201 58.4286L193.86 32.531L178.603 53.4593L168.497 67.3254C167.86 67.2148 167.22 67.1133 166.579 67.0165L160.345 37.3344L152.502 0L144.66 37.3344L138.426 67.0165C137.9 67.0949 137.379 67.1825 136.858 67.2701L110.587 31.8534V75.7658C110.02 76.047 109.457 76.3328 108.899 76.6233L59.8418 32.531L86.0626 93.3059C85.7215 93.6425 85.3895 93.9836 85.0529 94.3247L43.5523 81.233L68.8003 116.668C68.5421 117.161 68.2885 117.659 68.0396 118.157L0 110.828L59.3531 144.949C59.3485 144.977 59.3438 145.004 59.3392 145.032L58.8828 144.972L59.3116 145.226C59.2424 145.663 59.1686 146.106 59.1041 146.544L17.811 160.438L17.9954 160.498L17.811 160.558L59.1041 174.451C59.1686 174.894 59.2378 175.332 59.3116 175.77L40.6292 186.81L0 210.172L68.0396 202.843C68.2885 203.341 68.5421 203.839 68.8003 204.332L43.5523 239.767L85.0529 226.675C85.3895 227.016 85.7215 227.357 86.0626 227.694L59.8418 288.469L108.899 244.377C109.457 244.667 110.02 244.953 110.587 245.234V289.147L136.858 253.734C137.379 253.822 137.9 253.91 138.426 253.988L144.66 283.67L152.502 321.005L160.345 283.67L166.579 253.988C167.22 253.891 167.86 253.785 168.497 253.679L178.603 267.545L193.86 288.474L194.201 262.576L194.427 245.229C194.939 244.976 195.446 244.718 195.953 244.455L245.158 288.469L218.914 227.717C219.26 227.371 219.606 227.026 219.947 226.675L261.512 239.753L236.237 204.253C236.481 203.788 236.716 203.322 236.951 202.852L305 210.122ZM152.502 80.0483C197.489 80.0483 234.111 115.843 235.439 160.502C235.462 161.337 235.48 162.171 235.48 163.01C235.48 192.36 220.233 218.152 197.226 232.898C196.663 233.258 196.101 233.613 195.529 233.959C193.247 235.346 190.895 236.623 188.475 237.789C177.594 243.031 165.389 245.972 152.502 245.972C139.615 245.972 127.411 243.035 116.53 237.789C114.109 236.623 111.758 235.346 109.476 233.959C108.904 233.613 108.341 233.258 107.779 232.898C84.7717 218.152 69.5242 192.36 69.5242 163.01C69.5242 162.171 69.5426 161.337 69.5657 160.502C70.889 115.843 107.511 80.0483 152.502 80.0483Z" fill="#E84855"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="305" height="321" fill="white"/>
</clipPath>
</defs>
</svg>

</body>
</html>

Комментарии:

1. transform-box: fill-box; transform-origin: center;

Ответ №1:

Попробуйте добавить transform-origin: center; в свой #rays :

 <html>
<body>
  <svg width="305" height="321" viewBox="0 0 305 321" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="sun" clip-path="url(#clip0)">
<style>
#rays {
  transform-origin: center;
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
<path id="circle" d="M152.502 241.869C196.066 241.869 231.382 206.561 231.382 163.005C231.382 119.45 196.066 84.1418 152.502 84.1418C108.938 84.1418 73.623 119.45 73.623 163.005C73.623 206.561 108.938 241.869 152.502 241.869Z" fill="#E84855"/>
<path id="rays" d="M305 210.122L245.652 176.037C245.739 175.493 245.827 174.949 245.905 174.405L287.332 160.59L287.06 160.498L287.332 160.405L245.905 146.59C245.827 146.046 245.739 145.502 245.652 144.958L305 110.874L236.956 118.139C236.721 117.668 236.481 117.203 236.241 116.737L261.517 81.2376L219.952 94.3155C219.611 93.9651 219.265 93.6194 218.919 93.2737L245.163 32.5218L195.953 76.5495C195.446 76.2868 194.939 76.0286 194.427 75.7751L194.201 58.4286L193.86 32.531L178.603 53.4593L168.497 67.3254C167.86 67.2148 167.22 67.1133 166.579 67.0165L160.345 37.3344L152.502 0L144.66 37.3344L138.426 67.0165C137.9 67.0949 137.379 67.1825 136.858 67.2701L110.587 31.8534V75.7658C110.02 76.047 109.457 76.3328 108.899 76.6233L59.8418 32.531L86.0626 93.3059C85.7215 93.6425 85.3895 93.9836 85.0529 94.3247L43.5523 81.233L68.8003 116.668C68.5421 117.161 68.2885 117.659 68.0396 118.157L0 110.828L59.3531 144.949C59.3485 144.977 59.3438 145.004 59.3392 145.032L58.8828 144.972L59.3116 145.226C59.2424 145.663 59.1686 146.106 59.1041 146.544L17.811 160.438L17.9954 160.498L17.811 160.558L59.1041 174.451C59.1686 174.894 59.2378 175.332 59.3116 175.77L40.6292 186.81L0 210.172L68.0396 202.843C68.2885 203.341 68.5421 203.839 68.8003 204.332L43.5523 239.767L85.0529 226.675C85.3895 227.016 85.7215 227.357 86.0626 227.694L59.8418 288.469L108.899 244.377C109.457 244.667 110.02 244.953 110.587 245.234V289.147L136.858 253.734C137.379 253.822 137.9 253.91 138.426 253.988L144.66 283.67L152.502 321.005L160.345 283.67L166.579 253.988C167.22 253.891 167.86 253.785 168.497 253.679L178.603 267.545L193.86 288.474L194.201 262.576L194.427 245.229C194.939 244.976 195.446 244.718 195.953 244.455L245.158 288.469L218.914 227.717C219.26 227.371 219.606 227.026 219.947 226.675L261.512 239.753L236.237 204.253C236.481 203.788 236.716 203.322 236.951 202.852L305 210.122ZM152.502 80.0483C197.489 80.0483 234.111 115.843 235.439 160.502C235.462 161.337 235.48 162.171 235.48 163.01C235.48 192.36 220.233 218.152 197.226 232.898C196.663 233.258 196.101 233.613 195.529 233.959C193.247 235.346 190.895 236.623 188.475 237.789C177.594 243.031 165.389 245.972 152.502 245.972C139.615 245.972 127.411 243.035 116.53 237.789C114.109 236.623 111.758 235.346 109.476 233.959C108.904 233.613 108.341 233.258 107.779 232.898C84.7717 218.152 69.5242 192.36 69.5242 163.01C69.5242 162.171 69.5426 161.337 69.5657 160.502C70.889 115.843 107.511 80.0483 152.502 80.0483Z" fill="#E84855"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="305" height="321" fill="white"/>
</clipPath>
</defs>
</svg>

</body>
</html>

Или просто поверните весь SVG, переместив id="rays" его на svg себя:

   <html>
   <style>
    #rays {
      animation: rotate 5s linear infinite;
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
    </style>
    
    <body>
      <svg id="rays" width="305" height="321" viewBox="0 0 305 321" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="sun" clip-path="url(#clip0)">
   
    <path id="circle" d="M152.502 241.869C196.066 241.869 231.382 206.561 231.382 163.005C231.382 119.45 196.066 84.1418 152.502 84.1418C108.938 84.1418 73.623 119.45 73.623 163.005C73.623 206.561 108.938 241.869 152.502 241.869Z" fill="#E84855"/>
    <path d="M305 210.122L245.652 176.037C245.739 175.493 245.827 174.949 245.905 174.405L287.332 160.59L287.06 160.498L287.332 160.405L245.905 146.59C245.827 146.046 245.739 145.502 245.652 144.958L305 110.874L236.956 118.139C236.721 117.668 236.481 117.203 236.241 116.737L261.517 81.2376L219.952 94.3155C219.611 93.9651 219.265 93.6194 218.919 93.2737L245.163 32.5218L195.953 76.5495C195.446 76.2868 194.939 76.0286 194.427 75.7751L194.201 58.4286L193.86 32.531L178.603 53.4593L168.497 67.3254C167.86 67.2148 167.22 67.1133 166.579 67.0165L160.345 37.3344L152.502 0L144.66 37.3344L138.426 67.0165C137.9 67.0949 137.379 67.1825 136.858 67.2701L110.587 31.8534V75.7658C110.02 76.047 109.457 76.3328 108.899 76.6233L59.8418 32.531L86.0626 93.3059C85.7215 93.6425 85.3895 93.9836 85.0529 94.3247L43.5523 81.233L68.8003 116.668C68.5421 117.161 68.2885 117.659 68.0396 118.157L0 110.828L59.3531 144.949C59.3485 144.977 59.3438 145.004 59.3392 145.032L58.8828 144.972L59.3116 145.226C59.2424 145.663 59.1686 146.106 59.1041 146.544L17.811 160.438L17.9954 160.498L17.811 160.558L59.1041 174.451C59.1686 174.894 59.2378 175.332 59.3116 175.77L40.6292 186.81L0 210.172L68.0396 202.843C68.2885 203.341 68.5421 203.839 68.8003 204.332L43.5523 239.767L85.0529 226.675C85.3895 227.016 85.7215 227.357 86.0626 227.694L59.8418 288.469L108.899 244.377C109.457 244.667 110.02 244.953 110.587 245.234V289.147L136.858 253.734C137.379 253.822 137.9 253.91 138.426 253.988L144.66 283.67L152.502 321.005L160.345 283.67L166.579 253.988C167.22 253.891 167.86 253.785 168.497 253.679L178.603 267.545L193.86 288.474L194.201 262.576L194.427 245.229C194.939 244.976 195.446 244.718 195.953 244.455L245.158 288.469L218.914 227.717C219.26 227.371 219.606 227.026 219.947 226.675L261.512 239.753L236.237 204.253C236.481 203.788 236.716 203.322 236.951 202.852L305 210.122ZM152.502 80.0483C197.489 80.0483 234.111 115.843 235.439 160.502C235.462 161.337 235.48 162.171 235.48 163.01C235.48 192.36 220.233 218.152 197.226 232.898C196.663 233.258 196.101 233.613 195.529 233.959C193.247 235.346 190.895 236.623 188.475 237.789C177.594 243.031 165.389 245.972 152.502 245.972C139.615 245.972 127.411 243.035 116.53 237.789C114.109 236.623 111.758 235.346 109.476 233.959C108.904 233.613 108.341 233.258 107.779 232.898C84.7717 218.152 69.5242 192.36 69.5242 163.01C69.5242 162.171 69.5426 161.337 69.5657 160.502C70.889 115.843 107.511 80.0483 152.502 80.0483Z" fill="#E84855"/>
    </g>
    <defs>
    <clipPath id="clip0">
    <rect width="305" height="321" fill="white"/>
    </clipPath>
    </defs>
    </svg>

    </body>
    </html>

Ответ №2:

🙂

 <!DOCTYPE html>
<html>
    <head>
        <style>
            #rays {
              animation: rotate 5s linear infinite;
            }
            
            @keyframes rotate {
              0% {
                transform: rotate(0deg);
              }
            
              100% {
                transform: rotate(360deg);
              }
            }
            </style>
    </head>
    <body>
      <svg id="rays" width="305" height="321" viewBox="0 0 305 321" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="sun" clip-path="url(#clip0)">

    <path id="circle" d="M152.502 241.869C196.066 241.869 231.382 206.561 231.382 163.005C231.382 119.45 196.066 84.1418 152.502 84.1418C108.938 84.1418 73.623 119.45 73.623 163.005C73.623 206.561 108.938 241.869 152.502 241.869Z" fill="#E84855"/>
    <path  d="M305 210.122L245.652 176.037C245.739 175.493 245.827 174.949 245.905 174.405L287.332 160.59L287.06 160.498L287.332 160.405L245.905 146.59C245.827 146.046 245.739 145.502 245.652 144.958L305 110.874L236.956 118.139C236.721 117.668 236.481 117.203 236.241 116.737L261.517 81.2376L219.952 94.3155C219.611 93.9651 219.265 93.6194 218.919 93.2737L245.163 32.5218L195.953 76.5495C195.446 76.2868 194.939 76.0286 194.427 75.7751L194.201 58.4286L193.86 32.531L178.603 53.4593L168.497 67.3254C167.86 67.2148 167.22 67.1133 166.579 67.0165L160.345 37.3344L152.502 0L144.66 37.3344L138.426 67.0165C137.9 67.0949 137.379 67.1825 136.858 67.2701L110.587 31.8534V75.7658C110.02 76.047 109.457 76.3328 108.899 76.6233L59.8418 32.531L86.0626 93.3059C85.7215 93.6425 85.3895 93.9836 85.0529 94.3247L43.5523 81.233L68.8003 116.668C68.5421 117.161 68.2885 117.659 68.0396 118.157L0 110.828L59.3531 144.949C59.3485 144.977 59.3438 145.004 59.3392 145.032L58.8828 144.972L59.3116 145.226C59.2424 145.663 59.1686 146.106 59.1041 146.544L17.811 160.438L17.9954 160.498L17.811 160.558L59.1041 174.451C59.1686 174.894 59.2378 175.332 59.3116 175.77L40.6292 186.81L0 210.172L68.0396 202.843C68.2885 203.341 68.5421 203.839 68.8003 204.332L43.5523 239.767L85.0529 226.675C85.3895 227.016 85.7215 227.357 86.0626 227.694L59.8418 288.469L108.899 244.377C109.457 244.667 110.02 244.953 110.587 245.234V289.147L136.858 253.734C137.379 253.822 137.9 253.91 138.426 253.988L144.66 283.67L152.502 321.005L160.345 283.67L166.579 253.988C167.22 253.891 167.86 253.785 168.497 253.679L178.603 267.545L193.86 288.474L194.201 262.576L194.427 245.229C194.939 244.976 195.446 244.718 195.953 244.455L245.158 288.469L218.914 227.717C219.26 227.371 219.606 227.026 219.947 226.675L261.512 239.753L236.237 204.253C236.481 203.788 236.716 203.322 236.951 202.852L305 210.122ZM152.502 80.0483C197.489 80.0483 234.111 115.843 235.439 160.502C235.462 161.337 235.48 162.171 235.48 163.01C235.48 192.36 220.233 218.152 197.226 232.898C196.663 233.258 196.101 233.613 195.529 233.959C193.247 235.346 190.895 236.623 188.475 237.789C177.594 243.031 165.389 245.972 152.502 245.972C139.615 245.972 127.411 243.035 116.53 237.789C114.109 236.623 111.758 235.346 109.476 233.959C108.904 233.613 108.341 233.258 107.779 232.898C84.7717 218.152 69.5242 192.36 69.5242 163.01C69.5242 162.171 69.5426 161.337 69.5657 160.502C70.889 115.843 107.511 80.0483 152.502 80.0483Z" fill="#E84855"/>
    </g>
    <defs>
    <clipPath id="clip0">
    <rect width="305" height="321" fill="white"/>
    </clipPath>
    </defs>
    </svg>
    
    </body>
    </html>
Метки: