旋转渐变背景没有js

Question

我现在正在尝试使用css渐变动画，但我无法弄清楚如何在稳定的div广场上获得旋转渐变。

here is my fiddle

.navigation__logo__wrap {
  position: fixed;
  left:0;top:0;right:0;bottom:0;
  overflow: visible;
  z-index: -1;
}
.navigation__logo {
  position:absolute;
  left:100px;top:100px;width:100%;height:100%;
  padding:0;margin:0;
  height: 50px;
  width: 50px;
  background: rgba(246,100,55,1);
  background: -moz-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(246,100,55,1)), color-stop(19%, rgba(246,100,55,1)), color-stop(37%, rgba(244,53,47,1)), color-stop(37%, rgba(246,100,55,1)), color-stop(56%, rgba(244,53,47,1)), color-stop(92%, rgba(246,101,57,1)), color-stop(100%, rgba(246,101,57,1)));
  background: -webkit-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%);
  background: -o-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%);
  background: -ms-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%);
  background: linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f66437', endColorstr='#f66539', GradientType=1 );
    animation: spin 5s linear infinite;
    -moz-animation: spin 5s linear infinite;
    -webkit-animation: spin 5s linear infinite;
    -ms-animation: spin 5s linear infinite;
}

@keyframes spin {
 from { transform: scale3d(2,2,1) rotateZ(0deg);  }
 to { transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-moz-keyframes spin {
 from { -moz-transform: scale3d(2,2,1) rotateZ(0deg); }
 to { -moz-transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-webkit-keyframes spin {
 from { -webkit-transform: scale3d(2,2,1) rotateZ(0deg); }
 to { -webkit-transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-ms-keyframes spin {
 from { -ms-transform: scale3d(2,2,1) rotateZ(0deg); }
 to { -ms-transform: scale3d(2,2,1) rotateZ(360deg); }
}

<div class="navigation__logo__wrap">
  <div class="navigation__logo"></div>
</div>

正如您所看到的那样，整个广场正在以背景旋转。但我希望方形div稳定，只需旋转背景即可获得格兰西效果。我不想使用任何js。

希望你能帮助我， 提前谢谢！

Answer 1

您可以将包装器div设置为overflow: hidden;并使其小于旋转子级：

.navigation__logo__wrap {
  position: fixed;
  left: 50px;
  top: 50px;
  right: 0;
  bottom: 0;
  height: 50px;
  width: 50px;
  overflow: hidden;
}
.navigation__logo {
  position: absolute;
  padding: 0;
  margin: 0;
  height: 50px;
  width: 50px;
  background: rgba(246, 100, 55, 1);
  background: -moz-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(246, 100, 55, 1)), color-stop(19%, rgba(246, 100, 55, 1)), color-stop(37%, rgba(244, 53, 47, 1)), color-stop(37%, rgba(246, 100, 55, 1)), color-stop(56%, rgba(244, 53, 47, 1)), color-stop(92%, rgba(246, 101, 57, 1)), color-stop(100%, rgba(246, 101, 57, 1)));
  background: -webkit-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%);
  background: -o-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%);
  background: -ms-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%);
  background: linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f66437', endColorstr='#f66539', GradientType=1);
  animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
  -webkit-animation: spin 5s linear infinite;
  -ms-animation: spin 5s linear infinite;
}
@keyframes spin {
  from {
    transform: scale3d(2, 2, 1) rotateZ(0deg);
  }
  to {
    transform: scale3d(2, 2, 1) rotateZ(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: scale3d(2, 2, 1) rotateZ(0deg);
  }
  to {
    -moz-transform: scale3d(2, 2, 1) rotateZ(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: scale3d(2, 2, 1) rotateZ(0deg);
  }
  to {
    -webkit-transform: scale3d(2, 2, 1) rotateZ(360deg);
  }
}
@-ms-keyframes spin {
  from {
    -ms-transform: scale3d(2, 2, 1) rotateZ(0deg);
  }
  to {
    -ms-transform: scale3d(2, 2, 1) rotateZ(360deg);
  }
}

<div class="navigation__logo__wrap">
  <div class="navigation__logo"></div>
</div>