一些花里胡哨——底盘旋转、闪烁星星

底盘旋转

对于之前在CSS实现科技感旋转底盘

一文中看见的效果十分心动，但由于没有合适的图片素材，后面自己用纯css写了一下

//div部分
<div style="z-index: 999!important;background-color: #ffffff00;height: 540px;width:540px;left:100px;position: absolute">
            <div class="ball"></div>
            <div class="round"></div>
            <div class="roundBig"> </div>
            <div class="roundSmall" ></div>
          </div>
//样式
//样式球
.ball{
    position: absolute;
    left: 50px;
    height:50px;
    width:50px;
    z-index: 6;
    background-image:linear-gradient(180deg, rgba(6,4,47,1) 0%, rgba(21,21,91,1) 20%, rgba(85,85,203,1) 64%, rgba(239,246,179,1) 100%);
    border-radius:50%;//利用圆角，将div变成圆形
    animation: cir 2s linear infinite alternate;
    //动画：动画名（cir） 持续时间(2s) 动画方式（linear）动画迭代次数（infinite无限次）动画方向（alternate交替播放
  }
//圆环样式
  .round {
    position: absolute;
    left: 25px;
    top:100px;
    width: 100px;
    height: 100px;
    display: inline-block;
    animation: move 2s infinite linear;
    border-radius: 50%;
    z-index: 1;
    transform-style: preserve-3d;
    //遮罩，有颜色部分显示原来内容，透明不显示
    -webkit-mask:radial-gradient(circle at center center, #0000 35px, red 0);
    background: conic-gradient(#0000 0% 5%,#B9C1F8 5% 25%,#0000 26% 30%,#5979EF 31%,#B9C1F8 100%);
  }
  .roundBig {
    position: absolute;
    top:100px;
    left: 0;
    width: 150px;
    height: 150px;
    display: inline-block;
    animation: move 3s infinite linear;
    z-index: 2;
    border-radius: 50%;
    -webkit-mask:radial-gradient(circle at center center, #0000 70px, red 0);
    background: conic-gradient(#B9C1F8 0%,#0000 26% 30%,#5979EF 31%,#0000 46% 51%,#B9C1F8 100%);
  }
  .roundSmall {
    position: absolute;
    top:100px;
    left: 10px;
    width: 110px;
    height: 110px;
    display: inline-block;
    animation: move 5s infinite linear;
    border:10px dashed #B9C1F8;
    border-radius: 50%;
    z-index: 1;

  }
  @keyframes move {
    from {
      transform: rotateX(75deg) rotateZ(0);
    }
    to {
      transform: rotateX(75deg) rotateZ(360deg);
    }
  }
  @keyframes cir{
    from{margin-top:0px}
    to{margin-top:105px}
  }

---

星空闪烁

vue组件中，页面具体引入和背景颜色什么的就不贴了，星星图片可以自己百度一张，也可以在css的背景里面直接设置成圆角底色

<template>
<div id="star1" ref="star1">
  <div class="startInti" v-for="(item, index) in 200" :key="index" ref="startInti"></div>
</div>
</template>

<script>
export default {
  name: "StarBackground2",
  mounted() {
    this.initstart()
  },
  data(){
    return {
      b:false
    }
  },
  methods:{
    initstart(){
      let star = this.$refs.startInti
      var screenW = document.documentElement.clientWidth;
      var screenH = document.documentElement.clientHeight;
      star.forEach(item=>{
        var x = parseInt(Math.random() * screenW);
        var y = parseInt(Math.random() * screenH);
        item.style.left=x+'px'
        item.style.top=y+'px'
        // 随机缩放
        var scale = Math.random() * 1.5;
        item.style.transform = 'scale(' + scale +')';
        // 闪烁推迟
        var rate = Math.random() * 1.5;
        item.style.animationDelay = rate + 's';
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#star1{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  .startInti{
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    //border: 5px saddlebrown solid ;
    background: url(../assets/start.png) center center / 10px 10px !important;
    //background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
    animation: flash 1s alternate infinite;
  }
  .startInti:hover{
     transform: scale(2) rotate(180deg) !important;
     transition: all 1s;
   }
}

@keyframes flash{
  0%{ opacity: 0; scale: 0.5;}
  100%{ opacity: 1; scale: 1;}
}

</style>

效果图（这里把两个放到了一个页面）：

效果图