html - 向旋转中心移动 svg

问题描述

我在我的投资组合页面上遇到了 svg 的问题。我创建了 svg，并使用动画在无限循环中旋转 svg。当我多次重新加载我的投资组合页面时会出现问题。当我这样做时，我的屏幕开始向旋转中心移动。我正在寻找解决方案，有人知道有什么帮助吗？

图片：

几次重新加载后：

这是我的代码：

html {
  font-size: 62.5%;  
  background-color: var(--color-tertiary);
  overflow-x: hidden; // My svg is really big and it overflows page, so I need to use this
}

/***************** HEADER **********************/

.header{
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
  position: relative; 

  &__logo{ // this is the svg 
    position: absolute;
    top: 0;
    left: 30rem;
    width: 180rem;
    z-index: -1; // I use z-index to make sure that moving svg is in the background of the page

    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 500s linear infinite;
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(360deg);} }
  }

  &__wrapper{
    z-index: 10;
  }
}

标签： htmlcsssvg

我看到这部分：

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg);} }

在课堂内。所有关键帧都应该是独立的。在 @keyframes 行中，还要从变换中删除 -webkit-。

html - 向旋转中心移动 svg

问题描述

解决方案

推荐阅读