鼠标跟随粒子动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const colors = ["#0A4247", "#8C2F0D", "#F2A057", "#F2C185", "#8CB7B8"];
const shootingStarColors = ["#F2C185", "#8CB7B8"];

const Star = {
  template:
    '<g><circle class="star" :cx="`${x}%`" :cy="`${y}%`" :r="r" :fill="color"/><circle class="star" :cx="`${x + 100}%`" :cy="`${y - 100}%`" :r="r" :fill="color"/><circle class="star" :cx="`${x}%`" :cy="`${y - 100}%`" :r="r" :fill="color"/><circle class="star" :cx="`${x + 100}%`" :cy="`${y}%`" :r="r" :fill="color"/></g>',
  data() {
    return {
      x: Math.floor(Math.random() * 100),
      y: Math.floor(Math.random() * 100),
      r: Math.random() * 2 + 0.5,
      color: colors[Math.floor(Math.random() * colors.length)]
    };
  }
};

const spring_x = this.K * (this.x - this.origin.x);
      const damper_x = this.B * this.vx;
      this.ax = (spring_x + damper_x) / this.mass;
      this.vx += this.ax * (t / 1000);
      this.x += this.vx * (t / 1000);

const spring_y = this.K * (this.y - this.origin.y);
      const damper_y = this.B * this.vy;
      this.ay = (spring_y + damper_y) / this.mass;
      this.vy += this.ay * (t / 1000);
      this.y += this.vy * (t / 1000);

this.sheet.rules[0].style.transform = `translate(${this.x}px, ${this.y}px)`;

requestAnimationFrame(this.tick);
    }
  },
  created() {
    this.sheet.insertRule(
      `.circle-${this.index} { transform: translate(${this.x}px, ${this.y}px); }`,
      0
    );
    document.adoptedStyleSheets = [...document.adoptedStyleSheets, this.sheet];
  }
};

new Vue({
  el: "#app",
  components: {
    DynamicCircle,
    Star,
    ShootingStar
  },
  data: {
    origin: {},
    bounds: {},
    circles: []
  },
  methods: {
    doThing(e) {
      Vue.set(this.origin, "x", e.x - this.bounds.x);
      Vue.set(this.origin, "y", e.y - this.bounds.y);
    },
    doThingTouch(e) {
      Vue.set(this.origin, "x", e.touches[0].pageX - this.bounds.x);
      Vue.set(this.origin, "y", e.touches[0].pageY - this.bounds.y);
    }
  },
  mounted() {
    this.bounds = this.$refs.svg.getBoundingClientRect();
  }
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg