Question

我正试图获得这个平面动画，以便飞机在全球范围内飞行：

planes

我已使用<circle>元素将地球添加到代码中，但我不确定如何屏蔽飞机的背面，使它们看起来像是在“环绕”地球上飞行。

planes-globe

我尝试将position:relative与z-indexes一起使用，以实现地球比飞机背面更“靠近”的位置，但我无法将其拉下来。

感谢任何帮助，谢谢。

CODE

<svg width="300px" height="300px">
  <defs>
    <path id="svg-half-plane"
          d=" M 0,-5
             A 1,1 0 0 1 1,-4
             L 1,-1 5,1 5,2 1,1 1,3 2,4 2,5 0,4
             Z"
          ></path>

    <symbol viewBox="0 0 10 10" id="svg-plane" overflow="visible">
      <use xlink:href="#svg-half-plane"></use>
      <use xlink:href="#svg-half-plane" transform="scale(-1, 1)"></use>
    </symbol>
  </defs>
  <g class="sky" transform="translate(150, 150)">

    <circle class="globe" cx="0" cy="0" r="100" />

    <g class="plane-container" transform="rotate(289)">
      <use class="plane" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

    <g class="plane-container" transform="rotate(129)">
      <use class="plane delay-1" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

    <g class="plane-container" transform="rotate(37.5)">
      <use class="plane delay-2" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

    <g class="plane-container" transform="rotate(57.5)">
      <use class="plane delay-3" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

    <g class="plane-container" transform="rotate(-37.5)">
      <use class="plane delay-4" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>


  </g>
</svg>

CSS

body, html {
  padding: 0;
  margin: 0;
  border: 0;
  height: 100%;
  background: #222;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  display          : block;
  background-color : #555;
  shape-rendering  : crispEdges;
}

.plane-container {
  -webkit-perspective : 900px;
  -ms-perspective     : 900px;
  perspective         : 900px;
  z-index:            : 3;
}

@-webkit-keyframes flyaround {
  0% {
    -webkit-transform : rotateX(0deg) translateZ(140px) scale3d(1, 1, 1);
    transform         : rotateX(0deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 1.0;
  }

  50% {
    -webkit-transform : rotateX(180deg) translateZ(140px) scale3d(0.5, 0.5, 0.5);
    transform         : rotateX(180deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 0.5;
  }

  100% {
    -webkit-transform : rotateX(360deg) translateZ(140px) scale3d(1, 1, 1);
    transform         : rotateX(360deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 1.0;
  }
}

@keyframes flyaround {
  0% {
    -webkit-transform : rotateX(0deg) translateZ(140px) scale3d(1, 1, 1);
    -ms-transform     : rotateX(0deg) translateZ(140px) scale3d(1, 1, 1);
    transform         : rotateX(0deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 1.0;
  }

  50% {
    -webkit-transform : rotateX(180deg) translateZ(140px) scale3d(0.5, 0.5, 0.5);
    -ms-transform     : rotateX(180deg) translateZ(140px) scale3d(0.5, 0.5, 0.5);
    transform         : rotateX(180deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 0.5;
  }

  100% {
    -webkit-transform : rotateX(360deg) translateZ(140px) scale3d(1, 1, 1);
    -ms-transform     : rotateX(360deg) translateZ(140px) scale3d(1, 1, 1);
    transform         : rotateX(360deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 1.0;
  }
}

.plane {
  fill              : none;
  -webkit-animation : flyaround 2500ms infinite linear;
  animation         : flyaround 2500ms infinite linear;
}

.delay-1 { -webkit-animation-delay: 123ms; animation-delay: 123ms; }
.delay-2 { -webkit-animation-delay: 2023ms; animation-delay: 2023ms; }
.delay-3 { -webkit-animation-delay: 773ms; animation-delay: 773ms; }
.delay-4 { -webkit-animation-delay: 1123ms; animation-delay: 1123ms; }

Answer 1

如果没有一些额外的元素或javascript我认为这很难。

你可以通过添加第二个镜像元素来实现这一点，第二个镜像元素是先前在DOM中创建的圆形元素，因此它出现在它后面。与此同时，当试图给出它背后的外观时，让前平面消失。

所以让前线消失......

<pre><code>
@keyframes blink {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@-webkit-keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
.blink {
  animation: blink 2500ms step-start 0s infinite;
  -webkit-animation: blink 2500ms step-start 0s infinite;
  -webkit-animation-delay: 400ms; 
  animation-delay: 400ms;
} 

...

    <g class="plane-container" transform="rotate(0)">
      <use class="plane" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

    <circle class="globe" cx="0" cy="0" r="100" />

    <g class="plane-container blink" transform="rotate(0)">
      <use class="plane" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

codepen

只需检查您需要的浏览器支持，尤其是在IE for svg + css3 transform support

中

Answer 2

我认为虚拟循环和相对时间是有帮助的。见How to make SVG Loop Animation?

＆＃13;

<svg>
  <rect>
    <animate id="o1" begin="0;o1.end" dur="10s"
    attributeName="visibility" from="hide" to="hide"/>
  </rect>
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin" 
    attributeName="cx" from="250" to="50" dur="5.05s"/>
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin+5s" 
    attributeName="cx" from="50" to="250" dur="5.05s"/>
  </circle>
</svg>

＆＃13;

SVG Animate Planes在全球范围内

2 个答案: