中秋节一定因为种种原因不能回家团聚吧,小编也是中秋没回家还在半夜爆肝代码😂

一个人的中秋节,难免有些伤感。家人在时,会觉得此日同往常无异;只有当孤身一人,面对空荡荡的房间时,才深刻地觉出这当是一个多么喜庆欢腾的节日。愿珍惜眼前人,尽享团圆夜。

话不多说进入主题:

效果图,此处月亮和星星都是在动的:

1631887793(1).jpg

第一步只需两个标签

 <div class="box1">
        <div class="moon"></div>
    </div>

css样式

盒子定位和展示背景图

 body {
        background: rgb(42, 42, 54);
        background-image: url('./下载.jpg');
        background-size:500px 290px;
        background-repeat: no-repeat;
        background-position:580px  110px
    }

    .box1 {
        width: 170px;
        height: 170px;
        position: relative;
        margin: 250px auto;
    }

星星样式

.moon {
        width: 4px;
        height: 4px;
        margin-left: 0px;
        background: #fff;
        border-radius: 50%;
        opacity: 1;
        /*使用box-shadow画多个有黑有白的点*/
        box-shadow: #fff 26px 7px 0 -1px,
            rgba(255, 255, 255, 0.1) -36px -34px 0 -1px,
            #fff 26px 7px 0 -1px,
            rgba(255, 255, 255, 0.1) -16px -34px 0 -1px,
            #fff 26px 7px 0 -1px,
            rgba(255, 255, 255, 0.1) -56px -34px 0 -1px,
            #fff 26px 7px 0 -1px,
            rgba(255, 255, 255, 0.1) -96px -34px 0 -1px,
            #fff 26px 7px 0 -1px,
            rgba(255, 255, 255, 0.1) -116px -34px 0 -1px,
            #fff 26px 7px 0 -1px,
            rgba(255, 255, 255, 0.1) -156px -34px 0 -1px,
            #fff 26px 7px 0 -1px,
            rgba(255, 255, 255, 0.1) -6px -34px 0 -1px,
            rgba(255, 255, 255, 0.1) -51px -34px 0 -1px,
            #fff -52px -62px 0 -1px,
            #fff 14px -37px,
            rgba(255, 255, 255, 0.1) 41px -19px,
            #fff 34px -50px,
            rgba(255, 255, 255, 0.1) 14px -71px 0 -1px,
            #fff 64px -21px 0 -1px,
            rgba(255, 255, 255, 0.1) 32px -85px 0 -1px,
            #fff 64px -90px,
            rgba(255, 255, 255, 0.1) 60px -67px 0 -1px,
            #fff 34px -127px,
            rgba(255, 255, 255, 0.1) -26px -103px 0 -1px;
        animation: moon_star 2.5s ease-in-out infinite;
    }

星星的动画

 @keyframes moon_star {/*将box-shadow画好的点,黑的变白的,白的变黑的,从而实现闪烁的效果 */
        50% {
            box-shadow: rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
                #fff -36px -34px 0 -1px,
                rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
                #fff -16px -34px 0 -1px,
                rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
                #fff -56px -34px 0 -1px,
                rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
                #fff -96px -34px 0 -1px,
                rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
                #fff -116px -34px 0 -1px,
                rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
                #fff -156px -34px 0 -1px,
                rgba(255, 255, 255, 0.1) 26px 7px 0 -1px,
                #fff -6px -34px 0 -1px,
                #fff -51px -34px 0 -1px,
                rgba(255, 255, 255, 0.1) -52px -62px 0 -1px,
                rgba(255, 255, 255, 0.1) 14px -37px,
                #fff 41px -19px,
                rgba(255, 255, 255, 0.1) 34px -50px,
                #fff 14px -71px 0 -1px,
                rgba(255, 255, 255, 0.1) 64px -21px 0 -1px,
                #fff 32px -85px 0 -1px,
                rgba(255, 255, 255, 0.1) 64px -90px,
                #fff 60px -67px 0 -1px,
                rgba(255, 255, 255, 0.1) 34px -127px,
                #fff -26px -103px 0 -1px;
        }
    }

月亮的样式

 .moon::after {
        content: '';
        width: 100px;
        height: 100px;
        position: absolute;
        top: -106px;
        border-radius: 50%;
        box-shadow: yellow -100px 0;
        animation: moon 5s ease-in-out infinite;
        transform: rotate(-5deg);
        transform-origin: 0 50%;
    }
    /*动画*/
    @keyframes moon {
        50% {
            transform: rotate(10deg);
        }
    }

是不是很简单啊?你实现了吗

小编很乐意分享一些前端技巧给并跟大家交朋友哦,有什么不懂的都可以问我!

  • 个人公z号:前端老实人,欢迎小伙伴加入大家庭一起学习啊