vue实现动态星空效果

淘淘是只狗

已于 2022-01-18 23:37:16 修改

阅读量4.6k

点赞数 5

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

于 2020-04-22 08:34:35 首次发布

本文链接：https://blog.csdn.net/qq_43477721/article/details/105673189

版权

vue 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

B站地址：https://www.bilibili.com/video/BV1XJ411a7Mf/?spm_id_from=333.788.videocard.18

在此之前，要先安装 less less-loader
webpack.base.conf.js

{
        test: /\.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader", options: {
            strictMath: true,
            noIeCompat: true
          }
        }]
      },

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-notes</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>
    <!-- built files will be auto injected -->
  </body>
</html>

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

<script>
export default {
  data () {
    return {
      starsCount: 800,
      distance: 800
    }
  },
  mounted () {
    let starArr = this.$refs.star
    starArr.forEach(item => {
      let speed = 0.2 + (Math.random() * 1)
      let 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>

<style scoped lang="less">
@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>

上一下效果图
在这里插入图片描述就是这么唯美✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨❗️❗️❗️❗️

学习一下这里面的一些知识点（作为一名小白，我只能惊叹大佬的技术）😇😇😇

radial-gradient() 函数用径向渐变创建 “图像”。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。（以中心为起点）
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
- perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时，比正常小，大小程度由该属性的值决定。当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。
- perspective-origin: 50% 100%; 定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。
- backface-visibility 属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。
- scale(x,y) 定义 2D 缩放转换。

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临
在这里插入图片描述

淘淘是只狗

关注

5
点赞
踩
32

收藏

觉得还不错? 一键收藏
1
评论
vue实现动态星空效果

B站地址：https://www.bilibili.com/video/BV1XJ411a7Mf/?spm_id_from=333.788.videocard.18在此之前，要先安装 less less-loaderwebpack.base.conf.js{ test: /\.less$/, use: [{ loader: "style-l...
复制链接

扫一扫