html - 使用半个径向背景作为背景动画

Question

在这段代码片段中，我的容器有简单的背景，我在上面放了一个放射状图案我想使用一半的透明图案并有动画，我的问题是我怎样才能正确地只使用一半的放射状图案

像这样:

CSS:

.container {
  width: 600px;
  height: 600px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI4YTlkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBkNGU3NyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -moz-radial-gradient(#28a9dd, #0d4e77);
  background: -webkit-radial-gradient(#28a9dd, #0d4e77);
  background: radial-gradient(#28a9dd, #0d4e77);
}
.container:after {
  content: "";
  display: block;
  position: absolute;
  width: 850px;
  height: 850px;
  top: -125px;
  left: -125px;
  background: url(http://static.puzzlexperts.com/images/RadialBurst_bkgd.png) no-repeat top center, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI4YTlkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBkNGU3NyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: url(http://static.puzzlexperts.com/images/RadialBurst_bkgd.png) no-repeat top center, -moz-radial-gradient(#28a9dd, #0d4e77);
  background: url(http://static.puzzlexperts.com/images/RadialBurst_bkgd.png) no-repeat top center, -webkit-radial-gradient(#28a9dd, #0d4e77);
  background: url(http://static.puzzlexperts.com/images/RadialBurst_bkgd.png) no-repeat top center, radial-gradient(#28a9dd, #0d4e77);
  background-position: center;
  background-blend-mode: screen;
  -moz-animation: spin 20s linear infinite;
  -webkit-animation: spin 20s linear infinite;
  animation: spin 20s linear infinite;
}

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

HTML:

<div class="container"></div>

https://codepen.io/flurrd/pen/gbYZGb

Answer 1

你需要调整伪元素(.container::after)的大小为容器的两倍以上(4倍更容易使用)，并将旋转点设置为容器底部周围。此外，您需要调整图像大小以适应伪元素的新大小(使用背景大小)。

演示 ( pen )

.container {
  width: 600px;
  height: 600px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.container:after {
  content: "";
  display: block;
  position: absolute;
  width: 2400px;
  height: 2400px;
  top: -90%;
  left: -150%;
  background: url(http://static.puzzlexperts.com/images/RadialBurst_bkgd.png) no-repeat top center, radial-gradient(#28a9dd, #0d4e77);
  background-position: center;
  background-size: 2400px;
  background-blend-mode: screen;
  animation: spin 20s linear infinite;
}

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

<div class="container"></div>