HTML 动态夜空特效

最新推荐文章于 2023-09-02 00:26:23 发布
外太空程序员
最新推荐文章于 2023-09-02 00:26:23 发布
阅读量500
点赞数 1
文章标签： html 前端 servlet
本文链接：https://blog.csdn.net/qq_48516121/article/details/127264162
版权
1.程序代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style>
        body,
        html {
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            position: relative;
            background: -webkit-radial-gradient(center, #000046 0%, #000 60%);
        }
        ::after,
        ::before {
            content: " ";
            display: block;
        }
        ::after,
        ::before,
        .moon,
        .sky,
        .star,
        .asteroid {
            position: absolute;
        }
        .moon {
            color: #ffd;
            background: radial-gradient(circle at -30% 50%, rgba(0, 0, 0, 0) 175px, currentColor 100%);
            z-index: 999;
            border-radius: 50%;
            height: 200px;
            width: 200px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 0 20px currentColor);
        }
        .sky {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            animation: rotate 400s infinite linear;
        }
        .star {
            width: 3px;
            height: 3px;
            background-color: white;
            border-radius: 50%;
            animation: shine 800s infinite linear;
        }
        .star.scale1 {
            transform: scale(1);
        }
        .star.scale2 {
            transform: scale(0.5);
        }
        .star.scale3 {
            transform: scale(1.3);
        }
        .star.animate1 {
            animation-duration: 0.5s;
        }
        .star.animate2 {
            animation-duration: 1s;
        }
        .star.animate3 {
            animation-duration: 1.5s;
        }
        .star.animate4 {
            animation-duration: 2s;
        }
        .star.opacity1 {
            opacity: 1;
        }
        .star.opacity2 {
            opacity: 0.5;
        }
        .star.opacity3 {
            opacity: 0.2;
        }
        .asteroid {
            top: -200px;
            left: -200px;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            animation-name: assteroid;
            animation-timing-function: linease-inear;
            animation-iteration-count: infinite;
            animation-duration: 7s;
            animation-delay: 2s;
        }
        .asteroid:before {
            width: 10px;
            height: 10px;
            background: #fff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            -moz-background-clip: padding;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            -webkit-box-shadow: 0px 0px 7px 2px #fff;
            -moz-box-shadow: 0px 0px 7px 2px #fff;
            box-shadow: 0px 0px 7px 2px #fff;
            bottom: 0;
            right: 0;
        }
        .asteroid:after {
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-bottom: 200px solid #fff;
            border-right: 3px solid transparent;
            bottom: -22px;
            right: 75px;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1deg);
        }
        @keyframes shine {
            0% {
                box-shadow: 0 0 15px 0px rgba(255, 255, 255, 0.05);
            }
            50% {
                box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.4);
            }
            100% {
                box-shadow: 0 0 15px 0px rgba(255, 255, 255, 0.05);
            }
        }
        @-webkit-keyframes shine {
            0% {
                box-shadow: 0 0 15px 0px rgba(255, 255, 255, 0.05);
            }
            50% {
                box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.4);
            }
            100% {
                box-shadow: 0 0 15px 0px rgba(255, 255, 255, 0.05);
            }
        }
        @keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @keyframes assteroid {
            0% {
                top: -200px;
                left: -200px;
                filter: alpha(opacity=80);
                opacity: 0.8;
            }
            10% {
                top: 200px;
                left: 200px;
                filter: alpha(opacity=0);
                opacity: 0;
            }
            100% {
                filter: alpha(opacity=0);
                opacity: 0;
            }
        }
        @-webkit-keyframes assteroid {
            0% {
                top: -200px;
                left: -200px;
                filter: alpha(opacity=80);
                opacity: 0.8;
            }
            10% {
                top: 200px;
                left: 200px;
                filter: alpha(opacity=0);
                opacity: 0;
            }
            100% {
                filter: alpha(opacity=0);
                opacity: 0;
            }
        }

    </style>
</HEAD>

<BODY>

<div class="sky"></div>
<div class="moon"></div>
<div class="asteroid"></div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
   ===============================================================

   Barev and welcome to my little playground!

   My name is Ani and I'm a Web Developer from Yerevan. Here you will find some of my personal experiments. Feel free to use them for whatever you want.

   ===============================================================
   */
    function init(){

        var styles = ["animate4", "animate1", "animate2", "animate3"];
        var scales = ["scale1", "scale2", "scale3"];
        var opacities = ["opacity1", "opacity1", "opacity1", "opacity2", "opacity2", "opacity3"];

        function rand(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }

        var stars = "";
        var count = 300;
        var widthWindow = window.innerWidth;
        var heightWindow = window.innerHeight;

        for (var i = 0; i < count; i++) {
            stars += "<span class='star " + styles[rand(0, 4)] + " " + opacities[rand(0, 6)] + " "
                + scales[rand(0, 3)] + "' style='animation-delay: ." + rand(0, 9)+ "s; left: "
                + rand(0, widthWindow) + "px; top: " + rand(0, heightWindow) + "px;'></span>";
        }

        document.querySelector(".sky").innerHTML = stars;

    }
    window.onload = init;
    window.onresize = init;
</script>
</BODY>
</HTML>
2.效果图