CSS实现可爱月饼

2023-10-13 39

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS实现可爱月饼

今天是中秋节，在我们的记忆里，中秋都是要吃月饼的，所以今天我们用CSS实现一个可爱月饼吧！

效果实现

页面结构

我们这里用一个id为app的盒子，里面放了可爱月饼的眼睛，嘴巴，花边等，主要是为了防止变形

<div id="app">
        <!-- 内容 -->
        <div>
            <!-- 眼睛 -->
            <ul class="eye">
                <li></li>
                <li></li>
            </ul>
            <!-- 鼻子 -->
            <div class="nose"></div>
            <!-- 酒窝 -->
            <ul class="dimple">
                <li></li>
                <li></li>
            </ul>
            <!-- 嘴巴-->
            <div class="mouth">
            </div>
            <!-- 名字 -->
            <span class="text">可爱月饼</span>
        </div>
        <!-- 花边边 -->
        <ul class="lace">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

可爱月饼主体

我们清楚默认样式，然后在将#app盒子固定定位放到页面水平中心位置，距离头部有一定的距离，内容盒子和花边盒子一模一样大并通过绝对定位定位好位置，它们两个的位置是一样的

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        #app {
            position: fixed;
            left: 50%;
            width: 400px;
            height: 400px;
            transform: translate(-50%);
        }
             #app>div,
        .lace {
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
        }

可爱月饼花边实现

花边实现我们通过无序列表的方式进行实现，在无序列表中声明多个子元素，一个子元素代表着一个花边，然后通过定位以及旋转属性放到合适的位置，这里的旋转角度我们利用360度为一圈的特性，使用360除以多少个花边得出每个花边的旋转角度最后得出一个圆形花边，我们这里用了18个花边，所以使用360/18得出每个只需要旋转20度，然后在通过translateY设置和中心点的距离，最后给花边设置上背景色和边框以及设置为圆形

.lace>li {
            position: absolute;
            top: -10px;
            left: -10px;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #f5cb91;
            list-style: none;
            border: 5px solid #f6a11a;
        }
        .lace>li:nth-child(1) {
            transform: rotateZ(20deg) translateY(180px);
        }
        .lace>li:nth-child(2) {
            transform: rotateZ(40deg) translateY(180px);
        }
        .lace>li:nth-child(3) {
            transform: rotateZ(60deg) translateY(180px);
        }
        .lace>li:nth-child(4) {
            transform: rotateZ(80deg) translateY(180px);
        }
        .lace>li:nth-child(5) {
            transform: rotateZ(100deg) translateY(180px);
        }
        .lace>li:nth-child(6) {
            transform: rotateZ(120deg) translateY(180px);
        }
        .lace>li:nth-child(7) {
            transform: rotateZ(140deg) translateY(180px);
        }
        .lace>li:nth-child(8) {
            transform: rotateZ(160deg) translateY(180px);
        }
        .lace>li:nth-child(9) {
            transform: rotateZ(180deg) translateY(180px);
        }
        .lace>li:nth-child(10) {
            transform: rotateZ(200deg) translateY(180px);
        }
        .lace>li:nth-child(11) {
            transform: rotateZ(220deg) translateY(180px);
        }
        .lace>li:nth-child(12) {
            transform: rotateZ(240deg) translateY(180px);
        }
        .lace>li:nth-child(13) {
            transform: rotateZ(260deg) translateY(180px);
        }
        .lace>li:nth-child(14) {
            transform: rotateZ(280deg) translateY(180px);
        }
        .lace>li:nth-child(15) {
            transform: rotateZ(300deg) translateY(180px);
        }
        .lace>li:nth-child(16) {
            transform: rotateZ(320deg) translateY(180px);
        }
        .lace>li:nth-child(17) {
            transform: rotateZ(340deg) translateY(180px);
        }
        .lace>li:nth-child(18) {
            transform: rotateZ(360deg) translateY(180px);
        }

可爱月饼的内容盒子实现

花边盒子和内容盒子我们初始设置的时候将它们设置到了同样的位置，也是为了让内容展示在花边的中心，我们给内容设置好边框和背景色

#app>div {
            box-sizing: border-box;
            top: 32px;
            left: 32px;
            width: 385px;
            height: 385px;
            z-index: 9;
            background-color: rgb(254, 166, 43);
            border: 5px solid #b62b00;
            user-select: none;
            cursor: pointer;
        }

可爱月饼的眼睛实现

眼睛用无序列表进行实现，flex布局结合定位，将眼睛定位到对应的位置，在使用css的边框属性勾画出眼睛的样式

/* 眼睛 */
        .eye {
            width: 200px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translate(-50%)
        }
        .eye li {
            width: 60px;
            height: 30px;
            border-radius: 60px 60px 0 0;
            border: 3px solid #000;
            border-bottom: none;
        }

可爱月饼的鼻子实现

通过css属性写出鼻子的样式后用定位放到合适的位置

/* 鼻子 */
        .nose {
            position: absolute;
            top: 140px;
            left: 50%;
            transform: translate(-50%);
            width: 70px;
            height: 20px;
            border-radius: 50%;
            background: #e67915;
        }

可爱月饼的酒窝实现

酒窝用无序列表实现，使用css设置好酒窝的样式后，flex布局结合定位放到合适的位置

/* 酒窝 */
        .dimple {
            position: absolute;
            top: 200px;
            left: 50%;
            transform: translate(-50%);
            width: 300px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .dimple li {
            width: 70px;
            height: 30px;
            border-radius: 50%;
            background: #fece66;
        }

可爱月饼的嘴巴实现

我们设置好样式之后，通过定位放到指定位置在通过css旋转以下，旋转过后在通过clip进行切割以下，设置好背景色之后，通过box-shadow实现舌头的样式，在使用伪元素实现舌头上的点操作

/* 嘴巴 */
        .mouth {
            position: absolute;
            top: 240px;
            left: 50%;
            transform: translate(-50%) rotate(90deg);
            width: 100px;
            height: 70px;
            border-radius: 50%;
            border: 3px solid #000;
            background: rgb(243, 196, 7);
            transform-origin: center center;
            clip: rect(0 auto auto 40px);
            box-shadow: 50px 0px 0 0px #b62b00 inset;
        }
        .mouth::after {
            content: "";
            position: absolute;
            top: 28px;
            left: 53px;
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
        }

可爱月饼名称实现

写好内容，用css设置好字体样式，定位好位置

.text {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translate(-50%);
            font-size: 25px;
            color: #fff;
        }

代码我放到码上掘金上了，感兴趣的大家可以看一下！