评论：CSS星空动态背景  [查看原文]

父容器 {

/*设置宽高*/
  width: 100%;
  height: 100%;
  /*下面的属性是必须的*/
  position: relative;
  background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
  background-attachment: fixed;
  overflow: hidden;
}

组件:

<template>
  <div class="star-bg">
      <div v-for="i in stars" :key="i" class="star-bg-star" :style="{
       transformOrigin:'0 0 '+(distance+Math.random()*300)+'px',
       transform:'translate3d(0,0,-'+(distance+Math.random()*300)+'px) rotateY('+(Math.random()*360)+'deg) rotateX('+(Math.random()*-50)+'deg) scale('+(0.2+Math.random())+','+(0.2+Math.random())+')'
    }">
      </div>
  </div>
</template>
<script>
export default {
  name: "star-bg",
  data() {
    return {}
  },
  methods: {},
  props: {
    stars: {
      type: Number,
      default: 1000
    },
    distance: {
      type: Number,
      default: 800
    }
  },
}
</script>
<style scoped>
body {
}
@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}
.star-bg{
  background-color: transparent;
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  bottom: 0;
  perspective-origin: 50% 100%;
  left: 50%;
  animation: rotate 90s infinite linear;
}
.star-bg-star {
  width: 2px;
  height: 2px;
  background: #f8f8ee;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0 -300px;
  transform: translate3d(0, 0, -300px);
  backface-visibility: hidden;
}
</style>

使用: 向父容器添加css 然后注册组件,在父容器里使用