纯手工 手绘vue动态星空

纯手工绘制动态星空
100行代码以内
想要更多源码私信杰哥(15536812237微信)

源码结构
纯手工 手绘vue动态星空_第1张图片
源码:
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <style>
      body{
        background: radial-gradient(200% 100% at bottom center,#f7f7b6,#e96f92,#1b2947);
        background: radial-gradient(220% 105% at top center,#1b2947 10%,#75517b 40%,#e96f92 65%,#f7f7b6);
        background-attachment: fixed;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

HelloWorld.vue

<template>
  <div class="stars">
    <div  class="star" v-for="(item,index) in starsCount"  :key="index" ref="star">
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data:function(){
    return {
      starsCount:800,//星星数量
      distance:800,//星星间距
    }
  },
  mounted: function () {
    let _this=this;
    let starArr=_this.$refs.star;
    console.log(starArr);
    starArr.forEach(item=>{
      var speed=0.2+(Math.random()*1);
      var thisDistance=_this.distance+(Math.random()*300);
      item.style.transformOrigin=`0 0 ${thisDistance}px`;
      item.style.transform=`translate3d(0,0,-${thisDistance}px) rotateY(${(Math.random()*360)}deg) rotateX(${(Math.random()* -50)}deg) scale(${speed},${speed})`;
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*动画*/
  @keyframes rotate {
    0%{
      transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
    }
    100%{
      transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
    }
  }
  .stars{
    transform:perspective(500px) ;
    transform-style: preserve-3d;
    position: absolute;
    perspective-origin: 50% 100%;
    left:50%;
    animation: rotate 90s infinite linear;
    bottom: 0;
  }
  .star{
    width: 2px;
    height: 2px;
    background: #f7f7b8;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
  }
</style>

星空效果图:
纯手工 手绘vue动态星空_第2张图片

你可能感兴趣的:(Vue,vue)