纯手工手绘vue动态星空

最新推荐文章于 2023-05-16 14:13:12 发布

贝西奇谈

最新推荐文章于 2023-05-16 14:13:12 发布

阅读量701

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/beixishuo/article/details/105129657

版权

Vue 专栏收录该内容

11 篇文章 19 订阅

订阅专栏

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

源码结构
在这里插入图片描述
源码：
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>

星空效果图：
在这里插入图片描述

贝西奇谈

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
纯手工手绘vue动态星空

纯手工绘制动态星空100行代码以为想要更多源码私信杰哥（15536812237微信）星空效果：源码结构源码：index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d...
复制链接

扫一扫