使用CSS阴影实现星空背景

宇珩前端记录

已于 2024-06-11 18:07:02 修改

阅读量439

点赞数 8

分类专栏： CSS效果分享文章标签： css 前端

于 2024-06-11 18:05:25 首次发布

本文链接：https://blog.csdn.net/2301_80817413/article/details/139605310

版权

CSS效果分享专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS实现星空背景

效果图如下

在这里插入图片描述

页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星空背景</title>
    <link rel="stylesheet" href="星空背景.css">
</head>
<body>
    <div class="main">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item4"></div>
        <div class="item5"></div>
    </div>
</body>
</html>

基础结构就是只有5个元素
看到的大小不同的粒子就是不同层级的元素

SCSS 文件

.main {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    
	$location: 100; // 每个粒子的随机位置单位vw、vh
	$duration: 200s; // 最小粒子的运行速度
    $count: 100; // 粒子数量
    
    @function getShadows($n) {
        $shadows: '#{random($location)}vw #{random($location)}vh #fff';

        @for $i from 2 through $n {
            $shadows: '#{$shadows}, #{random($location)}vw #{random($location)}vh #fff';
        }

        @return unquote($shadows);
    }



    @for $i from 1 through 5 {
        .item#{$i} {
            $size: #{$i}px;
            $duration: floor($duration / 2);
            $count: floor($count / 2);
            position: fixed;
            width: $size;
            height: $size;
            border-radius: 50%;
            animation: moveup $duration linear infinite;
            left: 0;
            top: 0;
            box-shadow: getShadows($count);

            &::after {
                content: '';
                position: fixed;
                left: 0;
                top: 100vh;
                border-radius: inherit;
                width: inherit;
                height: inherit;
                box-shadow: inherit;
            }
        }
    }

    @keyframes moveup {
        to {
            transform: translateY(-100vh);
        }
    }
}