当前位置：首页 > news >正文

HTML+CSS画一个卡通中秋月饼

news 2025/7/3 12:06:19

HTML+CSS画一个卡通中秋月饼🥮🥮🥮

中秋活动水个文章
整个div+css实现个月饼，给前端初学者一个练手的demo

效果图

在这里插入图片描述

思路

HTMl

先来个轮廓
画脸上的东西：眼睛、眉毛、腮红、嘴巴
眼睛丰富下瞳孔
画20个花瓣

CSS

轮廓是要外边一圈深色的边框
五官都是绝对定位+圆角实现
花瓣通过绝对定位+位移实现

代码

HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./index.css" /></head><body><div class="mooncake-container"><div class="mooncake-face"><div class="mooncake-blusher mooncake-blusher-left">CS</div><div class="mooncake-blusher mooncake-blusher-right">DN</div><div class="mooncake-eyebrow mooncake-eyebrow-left"></div><div class="mooncake-eyebrow mooncake-eyebrow-right"></div><div class="mooncake-eyes mooncake-eyes-left"><div class="mooncake-pupil"></div></div><div class="mooncake-eyes mooncake-eyes-right"><div class="mooncake-pupil"></div></div><div class="mooncake-mouth"></div></div><!-- 花瓣 --><div class="mooncake-petal-container"><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div><div class="mooncake-petal"></div></div></div></body>
</html>

CSS

html {height: 100%;
}body {margin: 0;display: flex;justify-content: center;align-items: center;height: 100%;
}.mooncake-container {position: relative;display: block;width: 400px;height: 400px;background-color: rgb(219, 143, 62);border-radius: 50%;box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.2);
}.mooncake-face {position: relative;width: 92%;height: 92%;margin: 4% auto;background-color: rgb(238, 163, 80);border-radius: 50%;
}.mooncake-blusher {position: absolute;width: 50px;height: 30px;border-radius: 50%;top: 60%;background-color: rgb(237, 108, 110);text-align: center;font-size: small;line-height: 30px;letter-spacing: 4px;text-shadow: -1px -1px 1px black;
}.mooncake-blusher-left {left: 10%;
}.mooncake-blusher-right {right: 10%;
}.mooncake-eyes {position: absolute;width: 80px;height: 80px;border-radius: 50%;top: 30%;background-color: white;box-shadow: -2px -2px 2px 1px black;display: flex;justify-content: center;align-items: center;
}.mooncake-eyes-left {left: 20%;
}.mooncake-eyes-right {right: 20%;
}.mooncake-pupil {position: relative;width: 70%;height: 70%;background-color: rgb(45, 25, 8);border-radius: 50%;box-shadow: 0 0 0px 6px rgb(63, 38, 19);
}.mooncake-pupil::before {content: "";position: absolute;width: 70%;height: 70%;right: 0;top: 0;background-color: white;border-radius: 50%;
}.mooncake-pupil::after {content: "";position: absolute;width: 30%;height: 30%;left: 5%;bottom: 0;background-color: white;border-radius: 50%;
}.mooncake-mouth {position: absolute;width: 70px;height: 70px;bottom: 15%;left: 50%;transform: translateX(-50%);background-color: rgb(119, 31, 25);border-radius: 50%;overflow: hidden;
}.mooncake-mouth::after {content: "";position: absolute;width: 150%;height: 40%;left: -25%;bottom: 0;background-color: rgb(237, 108, 110);border-radius: 50%;
}.mooncake-eyebrow {position: absolute;width: 40px;height: 20px;border-radius: 50%;top: 20%;background-color: rgba(0, 0, 0, 0.5);
}.mooncake-eyebrow-left {left: 26%;rotate: 10deg;
}.mooncake-eyebrow-right {right: 26%;rotate: -10deg;
}.mooncake-petal-container {position: absolute;width: 80px;height: 80px;top: calc(50% - 40px);left: calc(50% - 40px);z-index: -1;
}.mooncake-petal {position: absolute;width: 100%;height: 100%;left: 0;top: 0;border-radius: 50%;background-color: rgb(238, 163, 80);box-shadow: 0 0 5px 2px rgb(238, 163, 80);
}.mooncake-petal:nth-child(1) {transform: translate(30px, -180px);
}.mooncake-petal:nth-child(2) {transform: translate(88px, -164px);
}.mooncake-petal:nth-child(3) {transform: translate(134px, -128px);
}.mooncake-petal:nth-child(4) {transform: translate(164px, -84px);
}.mooncake-petal:nth-child(5) {transform: translate(180px, -30px);
}.mooncake-petal:nth-child(6) {transform: translate(180px, 30px);
}.mooncake-petal:nth-child(7) {transform: translate(164px, 84px);
}.mooncake-petal:nth-child(8) {transform: translate(134px, 128px);
}.mooncake-petal:nth-child(9) {transform: translate(88px, 164px);
}.mooncake-petal:nth-child(10) {transform: translate(30px, 180px);
}.mooncake-petal:nth-child(11) {transform: translate(-30px, 180px);
}.mooncake-petal:nth-child(12) {transform: translate(-88px, 164px);
}.mooncake-petal:nth-child(13) {transform: translate(-134px, 128px);
}.mooncake-petal:nth-child(14) {transform: translate(-164px, 84px);
}.mooncake-petal:nth-child(15) {transform: translate(-180px, 30px);
}.mooncake-petal:nth-child(16) {transform: translate(-180px, -30px);
}.mooncake-petal:nth-child(17) {transform: translate(-164px, -84px);
}.mooncake-petal:nth-child(18) {transform: translate(-134px, -128px);
}.mooncake-petal:nth-child(19) {transform: translate(-88px, -164px);
}.mooncake-petal:nth-child(20) {transform: translate(-30px, -180px);
}

中秋快乐！！！

HTML+CSS画一个卡通中秋月饼

HTMLCSS画一个卡通中秋月饼🥮🥮🥮 中秋活动水个文章整个divcss实现个月饼，给前端初学者一个练手的demo 效果图思路 HTMl 先来个轮廓画脸上的东西：眼睛、眉毛、腮红、嘴巴眼睛丰富下瞳孔画20个花瓣 CSS 轮廓是要外…...

编程日记 2023/9/17 23:42:49

echarts的折线图，在点击图例后，提示出现变化，不报错。tooltip的formatter怎么写

在点击图例的年后，提示框会相应的变化，多选和单选都会响应变化。tooptip的重度在formatter tooltip:{show:true,trigger:"axis",alwaysShowContent:true,triggerOn:"mousemove",textStyle:{color:"#fff"},backgroundColor…...

编程日记 2023/9/17 23:38:45

C++中的auto是一个关键字，用于在编译时自动推导变量的类型

C中的auto是一个关键字，用于在编译时自动推导变量的类型。通过使用auto关键字，编译器可以根据变量的初始化表达式来确定其类型，从而省略了显式地指定类型的步骤。使用auto关键字声明的变量必须在定义时进行初始化，以便编译器可以…...

编程日记 2023/9/17 23:36:44

VUE build:gulp打包：测试、正式环境

目录项目结构 Gulp VUE使用Gulp Vue安装Gulp Vue定义Gulp.js package.json build文件夹 config文件夹 static-config文件夹项目结构 Gulp Gulp是一个自动化构建工具，可以帮助前端开发者通过自动化任务来管理工作流程。Gulp使用Node.js的代码编写&#xff…...

编程日记 2023/9/17 23:34:40

1.使用turtle换一个五环2.设计这样一个程序：输入一个数字判断它是不是一个质数

1.使用turtle换一个五环 import turtle turtle.pensize(15) turtle.penup() turtle.color(blue) turtle.goto(-150,-35) turtle.pendown() turtle.circle(60) turtle.penup() turtle.color(black) turtle.goto(0,-35) turtle.pendown() turtle.circle(60) turtle.penup() turtl…...

编程日记 2023/9/17 23:31:35

C语言希尔排序

希尔排序（Shell Sort）是插入排序的一种，也称缩小增量排序，是直接插入排序算法的一种更高效的改进版本。希尔排序是非稳定排序算法。希尔排序的基本思想是：先将整个待排序的记录序列分割成为若干子序列（由…...

编程日记 2023/9/17 23:30:34

KubeSphere 在互联网医疗行业的应用实践

作者：宇轩辞白，运维研发工程师，目前专注于云原生、Kubernetes、容器、Linux、运维自动化等领域。前言 2020 年我国互联网医疗企业迎来了“爆发元年”，越来越多居民在家隔离期间不方便去医院看诊，只好采取在线诊疗的手…...

编程日记 2023/9/17 23:29:33

物联网：用python调入机器学习分析物联网数据入侵检测模块

要使用Python调用机器学习分析物联网数据入侵检测模块，您需要以下步骤： 安装Python和相关的机器学习库，如scikit-learn、pandas、numpy等。您可以使用pip命令来安装这些库。准备输入数据。这些数据可以是来自物联网设备的原始数据&#xff…...

编程日记 2023/9/17 23:28:32

使用scss简化媒体查询

在进行媒体查询的编写的时候，我们可以利用scss与与编译器，通过include混入的方式对代码进行简化，从而大大提高了代码的可维护性，也减少了代码的编写量，废话不多说，直接上代码： // 断点列表相当…...

编程日记 2023/9/17 23:27:32

win部署CRM

win部署crm） 1.phpstudy2.composer3.代码4.其他配置周末锴哥让我帮他部署了一个CRM，写个教程，方便之后他用。锴哥用的是 NxCrm，先把代码下下来。 1.phpstudy 1.首先是下载小皮面板，配置php的环境。这里面下载了php8…...

编程日记 2023/9/17 23:24:29

Linux命令200例：dip用于用户与远程主机建立通信连接

🏆作者简介，黑夜开发者，CSDN领军人物，全栈领域优质创作者✌。CSDN专家博主，阿里云社区专家博主，2023年6月csdn上海赛道top4。 🏆数年电商行业从业经验，历任核心研发工程师&#xff0…...

编程日记 2023/9/17 23:18:24

【每日一题】981. 基于时间的键值存储

981. 基于时间的键值存储 - 力扣（LeetCode） 设计一个基于时间的键值数据结构，该结构可以在不同时间戳存储对应同一个键的多个值，并针对特定时间戳检索键对应的值。实现 TimeMap 类： TimeMap() 初始化数据结构对象void…...

编程日记 2023/9/17 23:17:23

IMU姿态解算，从IMU数据中计算旋转、速度、位置，IMU测量的原理

0. 预备 a. IMU测量值解释 IMU在测量时，得到的角速度或者加速度均是相对于地心惯性系结果，并且将该结果表示到Body坐标系下，就形成了最终的IMU输出。记作： ω i b b \omega_{ib}^b ωibb，表示body系相对于惯性系的…...

编程日记 2023/9/17 23:16:22

【Qt-17】Qt调用matlab生成的dll库

matlab生成dll库 1、matlab示例代码 function BDCube(x,y)[x,y,z] cylinder(x,y);t1 hgtransform;s1 surf(3*x,3*y,4*z,Parent,t1);grid onview(3)shading interp end 2、matlab环境配置首先检查自己的mcc编译器是否可用，输出以下命令： &#x…...

编程日记 2023/9/17 23:13:20

css经典面试题（二)

文章目录 1、清除浮动2、opacity: 0、visibility: hidden、display: none 的区别3、css画一个三角形4、常见的主流浏览器前缀5、重绘与重排的区别？6、如何优化图片7、CSS3 中 transition 和 animation 的属性分别有哪些8、居中为什么要使用 transform（为…...

编程日记 2023/9/17 23:10:17

jira搜索search issue条目rest实用脚本

官方文档链接地址： The Jira Cloud platform REST API 实用json请求脚本如下： {"fields": ["summary","status"],"jql": "project abc AND summary ~ 【%s】【coverity】 AND componentCoverity"…...

编程日记 2023/9/17 23:09:15

《C++ primer plus》精炼（OOP部分）——对象和类（5）

“学习是照亮心灵的火炬，它永不熄灭，永不止息。” 文章目录类的自动和强制类型转换原始类型转换为自定义类型将自定义类型转换为原始类型类的自动和强制类型转换原始类型转换为自定义类型可以用一个参数的构造函数来实现，例如&#xff…...

编程日记 2023/9/17 23:08:15

钉钉旧版服务端SDK支持异步方法的升级改造

最近项目中需要对接钉钉，有些钉钉 API 的访问需要使用旧版服务端 SDK 才能搞定，但是这个 SDK 使用的还是 .NET Framework 2.0 框架，不能跨平台部署，也不支持 async\await 的异步操作方法，Nuget 上也有其它用户改造的 .…...

编程日记 2023/9/17 23:05:12

【C语言】【数据存储】用%d打印char类型数据，猜结果是啥

题目代码如下： #include <stdio.h> int main() {char a -1;signed char b-1;unsigned char c-1;printf("a%d,b%d,c%d",a,b,c);return 0; }解题关键： 1.二进制存储：原码，反码，补码互换 2.截断 3.整型…...

编程日记 2023/9/17 23:03:11

算法——双指针

1658. 将 x 减到 0 的最小操作数 - 力扣（LeetCode） 这道题的重点是，如何用最小的操作数，来使其x变为0——也可以看作是用最少的数据个数，来求和得到x。 ——但是我们可以知道，由于数据是从两端向中间取的…...

编程日记 2023/9/17 23:00:08

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化：人工智能的自我改进与监管挑战文章目录递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/6/19 4:37:30

springboot 百货中心供应链管理系统小程序

一、前言随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，百货中心供应链管理系统被用户普遍使用，为方…...

编程新知 2025/7/3 12:01:01

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2025/6/17 17:52:51

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群一、主从架构的不足与Dledger的定位主从架构缺陷数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求&#xff…...

编程新知 2025/6/18 22:53:06

Linux --进程控制

本文从以下五个方面来初步认识进程控制： 目录进程创建进程终止进程等待进程替换模拟实现一个微型shell 进程创建在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...

编程新知 2025/7/3 3:01:30

【SpringBoot自动化部署】

SpringBoot自动化部署方法使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一，能够实现代码拉取、构建、测试和部署的全流程自动化。配置Jenkins任务时，需要添加Git仓库地址和凭证，设置构建触发器（如GitHub…...

编程新知 2025/6/20 3:34:59

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一：HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二：Floyd 快慢指针法（…...

编程新知 2025/6/26 23:03:51

aardio 自动识别验证码输入

技术尝试上周在发学习日志时有网友提议“在网页上识别验证码”，于是尝试整合图像识别与网页自动化技术，完成了这套模拟登录流程。核心思路是：截图验证码→OCR识别→自动填充表单→提交并验证结果。代码在这里 import soImage; import we…...

编程新知 2025/6/29 8:38:58

32位寻址与64位寻址

32位寻址与64位寻址 32位寻址是什么？ 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元（地址），其核心含义与能力如下： 1. 核心定义地址位宽：CPU或内存控制器用32位…...

编程新知 2025/6/21 14:23:21

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤：1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现：客户端实现：4. Axi…...

编程新知 2025/6/20 10:01:35

HTML+CSS画一个卡通中秋月饼🥮🥮🥮

效果图

思路

代码

中秋快乐！！！

相关文章：