Vue项目利用sass函数、变量、 for循环实现可移动的星空

最新推荐文章于 2023-12-16 19:39:02 发布

wocwin

最新推荐文章于 2023-12-16 19:39:02 发布

阅读量315

点赞数 2

分类专栏： vue专栏 Vue3专栏 vite+vue3项目搭建文章标签： vue.js sass scss vue3 vite

本文链接：https://blog.csdn.net/cwin8951/article/details/130892285

版权

vue专栏同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

vite+vue3项目搭建

13 篇文章 7 订阅

订阅专栏

Vue3专栏

6 篇文章 0 订阅

订阅专栏

最终效果

在这里插入图片描述

具体代码实现

1、html

<div class="content">
      <div class="star1"></div>
      <div class="star2"></div>
      <div class="star3"></div>
      <div class="star4"></div>
      <div class="star5"></div>
</div>

2、scss

<style lang="scss">
@function getShadows($n) {
  $shadows: "#{random(100)}vw #{random(100)}vh #fff";
  @for $i from 2 through $n {
    $shadows: "#{$shadows},#{random(100)}vw #{random(100)}vh #fff";
  }
  @return unquote($shadows);
}
@keyframes moveUp {
  100% {
    transform: translateY(-100vh);
  }
}
$duration: 500s;
$count: 1200;
 .content {
     display: flex;
	 align-items: center;
	 justify-content: center;
	 height: 100vh;
	 overflow: hidden;
	 background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
	 background-size: cover;
    @for $i from 1 through 5 {
      $duration: floor(calc($duration / 2));
      $count: floor(calc($count / 2));
      .star#{$i} {
        $size: #{$i}px;
        position: fixed;
        top: 0;
        left: 0;
        width: $size;
        height: $size;
        border-radius: 50%;
        box-shadow: getShadows($count);
        animation: moveUp $duration linear infinite;
        &::after {
          position: fixed;
          top: 100vh;
          left: 0;
          width: $size;
          height: $size;
          content: "";
          border-radius: inherit;
          box-shadow: inherit;
        }
      }
    }
  }
</style>