HTML+CSS+JS实现 ❤️流星天体动画场景特效❤️

最新推荐文章于 2025-08-11 12:05:22 发布

原创最新推荐文章于 2025-08-11 12:05:22 发布 · 1.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#css #java #javascript #流星天体动画场景 #前端大作业

H5+CSS网页特效实战专栏收录该内容

110 篇文章

订阅专栏

本文展示了如何使用HTML和CSS创建一个逼真的星空背景，包括旋转的行星和流星效果。通过调整CSS样式，实现了圆润边框、文字颜色、背景渐变以及流星动画等细节，为网页增添视觉吸引力。

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

* {
    border-radius: 100px;
}

body {
    font-size: 30px;
    color: white
}

#ibandoc {
    color: white;
}

html {
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    overflow: hidden;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
}

.night li {
    position: absolute;
    list-style: none;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: #fff;
    transform: rotate(45deg);
}

.night li:nth-child(1) {
    width: 16px;
    height: 16px;
    top: 80%;
    left: 25%;
    background-color: grey;
}

.night li:nth-child(2) {
    top: 40%;
    left: 40%;
}

.night li:nth-child(3) {
    opacity: 0;
    top: 20%;
    left: 45%;
    width: 5px;
    height: 37px;
    animation: meteor 1.5s infinite linear;
    animation-delay: 1s;
}

.night li:nth-child(4) {
    top: 5%;
    left: 50%;
}

.night li:nth-child(5) {
    opacity: 0;
    top: 20%;
    left: 55%;
    width: 1px;
    height: 15px;
    animation: meteor 1.5s infinite linear;
}

@keyframes meteor {
    10% {
        opacity: 2;
    }
    80% {
        left: 5%;
        top: 85%;
        opacity: 0;
    }
}

.planet {
    width: 285px;
    height: 285px;
    background-image: url("../img/bg1.jpg");
    );
    border-radius: 50%;
    background-size: cover;
    box-shadow: -80px -20px 70px 2px rgb(29, 28, 28) inset, 3px 0 20px rgba(206, 182, 138, 0.555);
    animation: spin 10s linear reverse infinite;
    transform: rotate(30deg);
    backface-visibility: hidden;
}


}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-2000px);
    }
}

@keyframes spin {
    100% {
        background-position: 100%;
    }
}

HTML代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Planet!</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div id='stars'></div>
    <div id='stars2'></div>
    <div id='stars3'></div>

    <div class="container">
        <div class="night">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="planet"></div>
    </div>

</body>

</html>

上面的图片文件需要引入