vue 流星的样式和流光canvas

流星的代码，发现挺好玩的，先上代码，后再分开解构样式：

<template>
 <div class="index">
    <div class="star" style="top: 0px;left: 500px;"></div>
  </div>
</template>

<script>
import { getUrlPara } from '@/utils/factory'
import Parallax from 'parallax-js'
import gsap from 'gsap'

export default {
  name: 'kyUniverseTestPage',
  components: {

  },
  data(){
    return {
    }
  },
  async created() {
  },
  mounted(){
  },
  methods: {
    goGrap() {
      gsap.from("#titok", {duration: 1, x: 100});
      // gsap.fromTo('#titok',{width: 0, height: 0}, {duration: 1.5, width: 100, height: 200})
      // gsap.set("#titok", {rotationX: 360});
    },
     parallax(){
      if(this.parallaxIns){
        this.parallaxIns.destroy()
        this.parallaxIns = null
      }
      this.$nextTick(() =>{
        const innerDom = document.querySelector('.inner')
        console.log('innerDom',innerDom);
        if(innerDom){
          this.parallaxIns = new Parallax(innerDom)
        }
      }) 
    },
    handleAppoint() {
      _baq.track("form", { assets_id:this.pageInfo.assetsid, })
      if (!this.$hqTool.getCookie("token")) {
          this.$showSecondLogin.show(() =>{
            location.href = this.openlink
          });
      } else {
        console.log('this.openlink',this.openlink);
        if (!this.openlink) {
          this.$toast('地址为空',)
          return
        } else {
          location.href = this.openlink
        }
      }
    },
    async getTitokInfo() {
      let params = {
        id:this.act_id
      }
      try {
        let res = await this.$api.getTitokInfo(params)
        if (res.code === 200 && res.data) {
          let titlt = res.data.pagetitle
          let assetsid = res.data.assetsid
          this.pageInfo = res.data
          document.title = titlt
          // 设置登录的资产id
          localStorage.setItem("customerAssetsId",assetsid);
          // 抖音埋点
          _baq.track("page_view", { assets_id: assetsid, })
          // 设置商机
          this.setBussiness(titlt)
          // 获取url scheme
          this.getTitokWxUrlScheme(res.data.coverimageurl)
        } else {
          this.$toast(res.msg || '接口报错') 
        }
      } catch (e) {
        console.log('eeeeee',e);
      }
    },
    setBussiness(titlt) {
      let bussinessParams =JSON.stringify({
        memo: titlt,
        registerChannelId: "dyxd",
      });
      localStorage.setItem("bussinessParams",bussinessParams);
    },
    // 获取url scheme
    async getTitokWxUrlScheme(picUrl){
      if (!picUrl) return
      try {
        let params = {
          "expire": true,
          "expireInterval":1,
          "expireType": 1,
          "jumpWxa": {
            "path": "/pages/titok/index",
            "query": `pic=${picUrl}`
          }
        }
        let res = await this.$api.getTitokWxUrlScheme(params)
        console.log('11111111111res',res);
        if (''+res.code === '200' ) {
          this.openlink = res.data
        }else {
          this.$toast(res.msg || '接口报错') 
        }
      } catch (e) {
        console.log('e',e);
      } 
    }
  }
}
</script>
<style lang="less" scoped>
.index {
  background-color:#0e1c8b;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}
.star {
	display:block;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#FFF;
	position:absolute;
	transform-origin:100% 0;
	animation:star-ani 4s linear infinite;
	box-shadow:0 0 5px 5px rgba(255,255,255,.3);
	opacity:0;
	z-index:2;
}
.star:after {
	content:'';
	display:block;
	top:0px;
	left:4px;
	border:0px solid #fff;
	border-width:0px 90px 2px 90px;
	border-color:transparent transparent transparent rgba(255,255,255,.3);
	transform:rotate(-45deg) translate3d(1px,3px,0);
	box-shadow:0 0 1px 0 rgba(255,255,255,.1);
	transform-origin:0% 100%;
}
@keyframes star-ani {
	0% {
	opacity:0;
	transform:scale(0) translate3d(0,0,0);
}
20% {
	opacity:0.8;
	transform:scale(0.2) translate3d(-100px,100px,0);
}
40% {
	opacity:0.8;
	transform:scale(0.4) translate3d(-200px,200px,0);
}
60% {
	opacity:0.8;
	transform:scale(0.6) translate3d(-300px,300px,0);
}
80% {
	opacity:1;
	transform:scale(1) translate3d(-400px,400px,0);
}
100% {
	opacity:1;
	transform:scale(1.2) translate3d(-500px,500px,0);
}
}
</style>

看代码可以知道：看看星星的动画是由用animation和transform写出来的。

	animation:star-ani 4s linear infinite;

@keyframes star-ani {
	0% {
	opacity:0;
	transform:scale(0) translate3d(0,0,0);
}
20% {
	opacity:0.8;
	transform:scale(0.2) translate3d(-100px,100px,0);
}
40% {
	opacity:0.8;
	transform:scale(0.4) translate3d(-200px,200px,0);
}
60% {
	opacity:0.8;
	transform:scale(0.6) translate3d(-300px,300px,0);
}
80% {
	opacity:1;
	transform:scale(1) translate3d(-400px,400px,0);
}
100% {
	opacity:1;
	transform:scale(1.2) translate3d(-500px,500px,0);
}
}

星星的样式，其实是由一个div加上一个伪元素组成，这里可以理解为两个div
第一个div是一个圆加上阴影：

.star {
	display:block;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#FFF;
	position:absolute;
	transform-origin:100% 0;
	animation:star-ani 4s linear infinite;
	box-shadow:0 0 5px 5px rgba(255,255,255,.3);
	opacity:0;
	z-index:2;
}

伪元素是
由border组成和阴影box-shadow

.star:after {
	content:'';
	display:block;
	top:0px;
	left:4px;
	border:0px solid #fff;
	border-width:0px 90px 2px 90px;
	border-color:transparent transparent transparent rgba(255,255,255,.3);
	transform:rotate(-45deg) translate3d(1px,3px,0);
	box-shadow:0 0 1px 0 rgba(255,255,255,.1);
	transform-origin:0% 100%;
}

二、流光canvas
参考一下，晚点分享

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .sciBg {
      background: url('https://uploads.codesandbox.io/uploads/user/b95a7d92-15b4-471c-a9bf-d5cf0d6477e2/9w6A-one.jpg') center no-repeat;
      background-size: 1920px 500px;
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>
  <div class="sciBg">
    <div style="margin: 0 auto;width: 900px">
      <canvas id="myCanvas4" width="900" height="500" style="border:1px solid #fff;" ></canvas>
    </div>
  </div>
  <script>
      function  drawCanvas4() {
        let c = document.getElementById("myCanvas4");
        let context = c.getContext("2d");

        let width = 900;//画布宽度
        let height = 500;//画布高度

        let fPoints = [{x: 452, y: 410,r:2}, {x: 452, y: 410,r:2},{x:368,y:0,r:2},{x:536,y:0,r:2}];//初始点坐标

        function drawCircle() {
          for (let i = 0; i < fPoints.length; i++) {
            context.fillStyle = 'rgba(2, 179, 253,1)';//填充颜色-实心圆
            context.fill();//画实心圆
            context.beginPath();
            context.arc(fPoints[i].x, fPoints[i].y, fPoints[i].r, 0, Math.PI * 2);
            context.closePath();
          }

          if (fPoints[0].y > 265) {
            fPoints[0].x -= 2;
            fPoints[0].y -= 1.15;
            fPoints[1].x += 2;
            fPoints[1].y -= 1.15;
          } else if (fPoints[0].y > 0) {
            fPoints[0].y -= 2.5;
            fPoints[1].y -= 2.5;
          } else if (fPoints[0].y < 0) {
            fPoints = [{x: 452, y: 410,r:1.5}, {x: 452, y: 410,r:1.5},{x:368,y:0,r:2},{x:536,y:0,r:2}];//初始点坐标
          }

          if(fPoints[2].y < 264){
            fPoints[2].y += 2;
            fPoints[3].y += 2;
          }else if(fPoints[2].y<310){
            fPoints[2].x += 2;
            fPoints[2].y += 1.15;
            fPoints[3].x -= 2;
            fPoints[3].y += 1.15;
          }
        }
        function draw() {
          var img = new Image();
          img.onload = function(){
            context.drawImage(img,0,0);
          }
          img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
        }

        function render() {
          //默认值为source-over
          let prev = 'source-over';
          //只显示canvas上原图像的重叠部分
          context.globalCompositeOperation = 'destination-in';
          //设置主canvas的绘制透明度
          context.globalAlpha = 0.9;
          //这一步目的是将canvas上的图像变的透明
          context.fillRect(0, 0, width, height);
          //在原图像上重叠新图像
          context.globalCompositeOperation = prev;
          //在主canvas上画新圆
          drawCircle();
          if (width !== 0) {
            //在动画没有结束前，递归渲染
            window.requestAnimationFrame(render);
          }
        }
        draw()
        window.requestAnimationFrame(render);
      }

     drawCanvas4()
  </script>
</body>
</html>