当前位置：首页 > article >正文

vue特效，一片动态星空

article 2025/1/22 15:05:11

vue实现漂亮星空，超级简单

1.创建vue项目： vue create demo

2.注册vuecli : npm i element-ui -S

3.加载依赖：npm i

4.运行项目 :npm run serve

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

<template>
    <div class="body">
      <div class="stars" ref="starsRef">
        <div class="star" v-for="(item, index) in starsCount" :key="index"></div>
      </div>
    </div>
  </template>
  
  <script>
  import { onMounted, ref } from "vue";
  
  export default {
    setup() {
      let starsRef = ref(null);
  
      const starsCount = 800; //星星数量
      const distance = 900; //间距
  
      onMounted(() => {
        let starNodes = Array.from(starsRef.value.children);
        starNodes.forEach((item) => {
          let speed = 0.2 + Math.random() * 1;
          let thisDistance = 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})`;
        });
      });
  
      return {
        starsRef,
        starsCount,
      };
    },
  };
  </script>
  
  <style lang="css" scoped>
  .body {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: radial-gradient(
      200% 100% at bottom center,
      #f7f7b6,
      #e96f92,
      #1b2947
    );
    background: radial-gradient(
      200% 105% at top center,
      #1b2947 10%,
      #75517d 40%,
      #e96f92 65%,
      #f7f7b6
    );
    background-attachment: fixed;
    overflow: hidden;
  }
  
  @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: 45%;
    animation: rotate 90s infinite linear;
    bottom: 0;
  }
  .star {
    width: 2px;
    height: 2px;
    background: #f7f7b6;
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
  }
  </style>

<template>
  <div id="app">
    <MyStar></MyStar>
  </div>
</template>

<script>
import MyStar from './components/MyStar.vue';



export default {
  name: 'App',
  components: {
    MyStar
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

查看全文

http://www.kler.cn/a/350339.html