中秋佳节，嫦娥望月

cv竹叶
369 阅读2分钟

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

前言

大家好，我是cv竹叶，中秋佳节即将到来，在此祝屏幕前的你，中秋快乐！！！

竟然大家都来了，就一起和嫦娥看月亮吧！

777.gif

什么？你想看如何实现？那就往下看吧！

开搞

画出背景星空

首先画背景的，流动星星。因为星星数量很多，所以我这里运用boxShadow来一次性添加多个白点当星星。

html部分:
<div id="stars"></div>

css部分:
#stars {
    width: 2px;
    height: 2px;
    background: transparent;
    animation: animStar 30s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
}
@keyframes animStar {
    from {
        transform: translateY(0px)
    }

    to {
        transform: translateY(-500px)
    }
}

js部分:
<script>
    let dom = document.getElementById('stars');
    function randomNum(minNum, maxNum) {//生成随机数
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * minNum + 1, 10);
                break;
            case 2:
                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                break;
            default:
                return 0;
                break;
        }
    }
    let boxShadow = "";
    let num = 100;//星星数量
    for(let i=0;i<num;i++){
        boxShadow = boxShadow + `${randomNum(1, 1000)}px ${randomNum(1, 1000)}px #FFF`
        if(i==num-1){
            boxShadow = boxShadow + '';
        }else{
            boxShadow = boxShadow + ','
        }
    }
    dom.style.boxShadow = boxShadow;
</script>

image.png

画出月亮

接下来，我们来画一个圆圆的大月亮，通过background的linear-gradient达到月亮渐变效果，box-shadow来实现光晕

html部分:
<div id="moon"></div>

css部分:
/* 月亮 */
#moon {
    position: absolute;
    right: 100px;
    top: 50px;
    width: 80px;
    height: 80px;
    background-color: #F2F2F2;
    background: linear-gradient(to right, #ffedd2 20%, #F2F2F2 80%);
    border-radius: 100px;
    box-shadow: 0 0 60px 50px rgb(135 135 160 / 40%);
    opacity: 1;
    z-index: 2;
}

image.png

再接下来，我们画个草地，随便让嫦娥站上去

这个草地，就直接弄了个绿色块。

html部分：
<div class="grassland"></div>
<div class="girl"><img src="./e.png" alt=""></div>

css部分：
/* 草地 */
.grassland{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: #134a1d;
    border-radius: 50% 50% 0 0;
}
img{
    width: 100%;
    height: 100%;
}
/* 嫦娥 */
.girl{
    width: 150px;
    position: absolute;
    bottom: 0;
    left: 500px;
    opacity: .8;
}

image.png

这样就大部分完成啦，我们再加个祝福话语，全部代码在下面哦！

前端代码：

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>嫦娥望月</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" />
</head>

<body>
    <div class="box">
        <!-- 星星 -->
        <div id="stars"></div>
        <!-- 月亮 -->
        <div id="moon"></div>
        <!-- 草地 -->
        <div class="grassland"></div>
        <!-- 嫦娥 -->
        <div class="girl"><img src="./e.png" alt=""></div>
        <!-- 气泡 -->
        <div class="txt">中秋节快乐呀~</div>
    </div>
    <script>
        let dom = document.getElementById('stars');
        function randomNum(minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10);
                    break;
                case 2:
                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                    break;
                default:
                    return 0;
                    break;
            }
        }
        let boxShadow = "";
        let num = 100;//星星数量
        for(let i=0;i<num;i++){
            boxShadow = boxShadow + `${randomNum(1, 1000)}px ${randomNum(1, 1000)}px #FFF`
            if(i==num-1){
                boxShadow = boxShadow + '';
            }else{
                boxShadow = boxShadow + ','
            }
        }
        dom.style.boxShadow = boxShadow;
    </script>
</body>

</html>

css样式：

@charset "utf-8";
.box{
    margin: auto;
    width: 1000px;
    height: 500px;
    background: radial-gradient(ellipse at bottom, #1b2735 0, #090a0f 100%);
    overflow: hidden;
    position: relative;
}
/* 星星 */
#stars {
    width: 2px;
    height: 2px;
    background: transparent;
    animation: animStar 30s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
}



@keyframes animStar {
    from {
        transform: translateY(0px)
    }

    to {
        transform: translateY(-500px)
    }
}

/* 月亮 */
#moon {
    position: absolute;
    right: 100px;
    top: 50px;
    width: 80px;
    height: 80px;
    background-color: #F2F2F2;
    background: linear-gradient(to right, #ffedd2 20%, #F2F2F2 80%);
    border-radius: 100px;
    box-shadow: 0 0 60px 50px rgb(135 135 160 / 40%);
    opacity: 1;
    z-index: 2;
}

/* 草地 */
.grassland{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: #134a1d;
    border-radius: 50% 50% 0 0;
}
img{
    width: 100%;
    height: 100%;
}
/* 嫦娥 */
.girl{
    width: 150px;
    position: absolute;
    bottom: 0;
    left: 500px;
    opacity: .8;
}
/* 文字 */
.txt{
    position: absolute;
    bottom: 150px;
    right: 400px;
    color: #fff;
    opacity: 0;
    animation: animTxt 5s linear infinite;
}
@keyframes animTxt {
    from {
        opacity: 0;
    }

    to {
        opacity: .8;
    }
}

嫦娥图片：

e.png

总结

大家觉得好看，就为嫦娥姐点赞吧，祝大家中秋节快乐，写代码无bug！！！

avatar
文章
阅读
粉丝