CSS实现发光月亮

935 阅读4分钟

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

正值中秋佳节,中秋是家人团聚的时刻,家人团聚的时候最喜欢在庭院里,一起赏月吃月饼,我们今天就用CSS实现一个发光月亮吧

效果图

企业微信截图_16626315061960.png

这个月亮看起来感觉还蛮可爱的

页面结构

我们进行划分区域,有一个id为app的大盒子作为整体区域,moon类名盒子作为月亮体,承载了了月亮的所有部分主要是为了防止变形

    <div id="app">
        <!-- 月亮 -->
        <div class="moon">
            <!-- 眼睛 -->
            <ul class="eye">
                <li></li>
                <li></li>
            </ul>
            <!-- 嘴巴 -->
            <div class="mouth"></div>
            <!-- 酒窝 -->
            <ul class="dimple">
                <li></li>
                <li></li>
            </ul>
            <!-- 左胳膊 -->
            <div class="left_hand"></div>
            <!-- 右胳膊 -->
            <div class="right_hand"></div>
            <!-- 左小手 -->
            <ul class="left_finger">
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!-- 右小手 -->
            <ul class="right_finger">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

样式实现

首先清除一下所有的默认样式和让#app盒子通过css单位占满全屏在给一个背景色,同时声明一个css的变量,变量值为月亮的主题颜色

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    #app {

            width: 100vw;
            height: 100vh;
            background: #000;
            --bgColor: #fee786;
        }

月亮体的实现

我们通过固定定位的方式定位到页面的水平居中位置,在距离上面有一定的距离,通过css的var关键字结合背景属性给上背景色,在通过border-radius属性将月亮整体设置为圆形

    /* 月亮 */
        .moon {
            width: 300px;
            height: 300px;
            position: fixed;
            top:200px;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--bgColor);
            border-radius: 50%;
            
        }

月亮眼睛的实现

眼睛大盒子我们通过无序列表结合flex布局的方式进行实现,在通过定位放到合适的位置,眼睛高度设置为宽度的一半,在通过css的 border-radius使得形成一个半圆状,在通过设置边框大小和颜色就可以了


        /* 眼睛 */
        .eye {
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translate(-50%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 200px;
        }

        .eye li {
            width: 40px;
            height: 20px;
            border-radius: 0 0 40px 40px;
            border-bottom: 3px solid #000;
            border-left: 3px solid #000;
            border-right: 3px solid #000;
        }

月亮嘴巴的实现

嘴巴这里使用到了css中的clip属性,他是用于剪裁,必须和定位属性结合使用,我们设置好边框之后在进行剪裁就可以得出嘴巴的形状

  /* 嘴巴 */
        .mouth {
            position: absolute;
            top: 200px;
            left: 50%;
            transform: translate(-50%);
            width: 40px;
            height: 20px;
            border-radius: 50%;
            clip: rect(12px auto auto 0);
            border: 3px solid #000;
        }

月亮酒窝的实现

酒窝大盒子这里我们依旧使用无序列表进行实现,通过flex布局结合定位,在给每一个小酒窝设置宽高背景颜色,通过border-radius设置为圆形即可

/* 酒窝 */
        .dimple {
            width: 200px;
            position: absolute;
            top: 150px;
            left: 50%;
            transform: translate(-50%);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .dimple li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #f9b10d;
        }

月亮左右胳膊的实现

月亮左右胳膊的实现,这里也是用到了css的clip属性,先将月亮左右胳膊设置为椭圆,使用定位和旋转属性挪到合适的位置,最后通过clip剪裁出一个胳膊的样子

   /*胳膊 */
        .left_hand,
        .right_hand {
            width: 150px;
            height: 80px;
            position: absolute;
            top: 200px;
            clip: rect(0 auto 20px 0);
            border-radius: 50%;
            border: 5px solid var(--bgColor);
        }

        .left_hand {
            top: 200px;
            left: -80px;
            transform: rotate(-51deg);
        }

        .right_hand {
            left: 217px;
            transform: rotate(51deg);
        }

月亮小手实现

我们这里使用无序列表给里面子盒子设置为手指的样式,然后通过css旋转出一个小手的模样,在通过定位以及旋转挪到合适的位置

   /* 小手 */
        .left_finger,
        .right_finger {
            position: absolute;


        }

        .left_finger {
            top: 274px;
            left: -70px;
            transform: rotate(-83deg);
        }

        .right_finger {
            top: 276px;
            left: 345px;
            transform: rotate(-81deg);
        }

        .left_finger li,
        .right_finger li {

            width: 20px;
            height: 5px;
            border-radius: 50%;
            background: var(--bgColor);
        }

        .left_finger li:nth-child(1),
        .right_finger li:nth-child(1) {
            transform: rotate(20deg);
        }

        .left_finger li:nth-child(2),
        .right_finger li:nth-child(2) {
            transform: rotate(0deg);
        }

        .left_finger li:nth-child(3),
        .right_finger li:nth-child(3) {
            transform: rotate(-20deg);
        }

发光特效实现

我们定义一个css动画,这里用到了css属性filter中的drop-shadow,通过实现给元素实现一个发光的效果,在动画的初始和运动到正中间以及结束给drop-shadow定义不同的值实现闪烁的效果

        @keyframes luminescence {
            0% {
                filter: drop-shadow(0px 0px 5px var(--bgColor));
            }

            50% {
                filter: drop-shadow(0px 0px 25px var(--bgColor));
            }

            100% {
                filter: drop-shadow(0px 0px 5px var(--bgColor));
            }

        }

我们把动画添加到月亮主体盒子上且设置无限循环

    /* 月亮 */
        .moon {
            animation: luminescence 1s linear infinite;
        }

代码我已经放到码上掘金了,感兴趣的大家可以看一下!

坚持努力,无惧未来!