css3 h5星系动画

星系动画是比较炫酷的一种效果，可以通过CSS3 H5来实现，下面通过代码来演示如何使用CSS3 H5来实现星系动画效果。

.star {
      width: 400px;
      height: 400px;
      position: relative;
      margin: 0 auto;
      transform-style: preserve-3d;
      perspective: 1000px;
}
.star span {
      position: absolute;
      background: #fff;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      transform-origin: top left;
}
.star span:nth-child(1) {
      top: calc(50% - 200px);
      left: calc(50% - 200px);
      animation: orbit1 5s infinite linear;
}
.star span:nth-child(2) {
      top: calc(50% - 200px);
      left: calc(50% + 200px);
      animation: orbit2 5s infinite linear;
}
.star span:nth-child(3) {
      top: calc(50% + 200px);
      left: calc(50% - 200px);
      animation: orbit3 5s infinite linear;
}
.star span:nth-child(4) {
      top: calc(50% + 200px);
      left: calc(50% + 200px);
      animation: orbit4 5s infinite linear;
}
@keyframes orbit1 {
  100% {
        transform: rotate(360deg);
  }
}
@keyframes orbit2 {
  100% {
        transform: rotate(-360deg);
  }
}
@keyframes orbit3 {
  100% {
        transform: rotate(360deg);
  }
}
@keyframes orbit4 {
  100% {
        transform: rotate(-360deg);
  }
}
    

首先需要创建一个容器，并设置宽度、高度和相对定位，同时还需要加上perspective属性，这个属性会为三维转换元素提供透视效果。接下来创建四个span元素，设置它们的定位和动画，其中transform-origin属性是设置其旋转的坐标轴。最后定义四个orbit动画，分别对应四个span元素的轨道。

通过以上代码，便可实现一个简单的星系动画效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！