推荐
最新
待解答
搜索问答
问
【有奖问答】如果要用代码写一个月饼，你会怎么写？
编辑于 2025-09-25
答china马斯克
如果我把之前情人节的代码改改换成中秋节，阁下如何应对？
不多说先上效果图。
这里我使用HTML+CSS+JavaScript组合打造一款 “可交互的流心奶黄月饼”，既保留传统月饼的视觉形态，又加入鼠标悬浮流心溢出、点击掉落玉兔与祝福的动态效果，让代码里的中秋既有颜值又有互动感。
整个月饼分为 “外观层 - 流心层 - 交互层”，从视觉到体验层层递进，模拟真实吃月饼时 “咬开流心溢出” 的惊喜感。
操作设置：鼠标悬浮时，奶黄流心从月饼中心 “融化” 溢出，搭配发光效果，像刚掰开的热乎月饼；点击月饼时，不仅会弹出随机中秋祝福，还会从屏幕上方掉落玉兔、月亮、桂花等元素，模拟 “月宫撒福” 的浪漫场景。这里我没有用任何图片，纯代码通过 CSS 渐变、伪元素、动画实现所有视觉效果，轻量化且兼容性强，复制代码到本地 HTML 文件就能直接运行。
直接上代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>china马斯克的快乐中秋</title>
<style>
/* 页面基础样式：居中+深色背景凸显月饼 */
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #0f172a; /* 深夜蓝背景，模拟夜空 */
overflow: hidden;
}
/* 月饼外层：金黄外皮+圆形+阴影 */
.mooncake {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(135deg, #fbbf24, #d97706); /* 金黄渐变外皮 */
box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); /* 暖光阴影，更立体 */
cursor: pointer;
transition: transform 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
/* 鼠标悬浮：月饼轻微放大，模拟“被关注” */
.mooncake:hover {
transform: scale(1.05);
}
/* 月饼花纹：传统“福”字+环形纹路 */
.mooncake::before {
content: "福";
position: absolute;
font-size: 40px;
color: rgba(255, 255, 255, 0.8);
font-weight: bold;
z-index: 2;
}
.mooncake::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
border: 2px dashed rgba(255, 255, 255, 0.3); /* 环形虚线花纹 */
z-index: 1;
}
/* 流心层：隐藏状态，悬浮时显示并溢出 */
.filling {
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, #fde68a, #fbbf24); /* 奶黄流心色 */
opacity: 0; /* 初始隐藏 */
transition: all 0.5s ease;
z-index: 0;
}
.mooncake:hover .filling {
opacity: 1;
width: 150px;
height: 150px;
box-shadow: 0 0 30px rgba(253, 230, 138, 0.8); /* 流心发光效果 */
}
/* 掉落元素样式：玉兔、月亮、桂花 */
.falling-item {
position: absolute;
color: white;
font-size: 24px;
opacity: 0;
animation: fall 3s linear forwards;
}
@keyframes fall {
0% {
transform: translateY(-50px);
opacity: 1;
}
100% {
transform: translateY(800px) rotate(360deg);
opacity: 0;
}
}
/* 祝福弹窗样式 */
.blessing {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
background: rgba(255, 255, 255, 0.9);
padding: 20px 40px;
border-radius: 10px;
font-size: 22px;
color: #d97706;
opacity: 0;
transition: all 0.5s ease;
z-index: 100;
}
.blessing.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
</style>
</head>
<body>
<!-- 月饼主体：外层+流心层 -->
<div class="mooncake">
<div class="filling"></div>
</div>
<!-- 祝福弹窗（默认隐藏） -->
<div class="blessing" id="blessing"></div>
<script>
// 1. 获取元素
const mooncake = document.querySelector('.mooncake');
const blessing = document.getElementById('blessing');
const body = document.body;
// 2. 中秋祝福文案库（随机切换）
const blessingTexts = [
"china马斯克祝大家，中秋快乐！愿你有月饼吃，有月光赏～",
"月圆人圆事事圆，饼甜情甜家家甜！",
"一口流心，一口团圆，中秋安康！",
"今夜月色真美，愿你与所爱共赏～",
"中秋至，愿日子和月亮一样，越来越圆！"
];
// 3. 点击月饼：弹出祝福+掉落元素
mooncake.addEventListener('click', () => {
// 3.1 显示随机祝福
const randomText = blessingTexts[Math.floor(Math.random() * blessingTexts.length)];
blessing.textContent = randomText;
blessing.classList.add('show');
// 3秒后隐藏祝福
setTimeout(() => {
blessing.classList.remove('show');
}, 3000);
// 3.2 生成10个随机掉落元素（玉兔、月亮、桂花）
const items = ['🐇', '🌕', '🌸']; // 玉兔、月亮、桂花图标
for (let i = 0; i < 10; i++) {
const item = document.createElement('div');
item.classList.add('falling-item');
// 随机选择元素图标
item.textContent = items[Math.floor(Math.random() * items.length)];
// 随机位置（左右分散）
item.style.left = `${Math.random() * 100}vw`;
// 随机动画延迟（让掉落更有层次感）
item.style.animationDelay = `${Math.random() * 2}s`;
// 添加到页面
body.appendChild(item);
// 3秒后移除元素，避免占用内存
setTimeout(() => {
body.removeChild(item);
}, 3000);
}
});
</script>
</body>
</html>
14人回答了此问题
问
数据库如何在个人网站设计存储富文本文章？
提问于 2018-06-19
答大瓜皮
相对于个人网站，建议多方式存储。将生成的 HTML 放到硬盘上，访问的时候直接从磁盘读取文件提交到客户浏览器，这样不需要做数据处理就能火速读取。如果自己修改，就读取富文本的数据。至于数据库存储的内容，建议就是纯文字，去掉所有的格式信息，用来检索文章用。
来源链接：https://www.zhihu.com/question/52717468/answer/320826784
10人回答了此问题
问
本地网站上传轻量服务器，输入网址出来的也文件和html文件，怎么解决？
编辑于 2024-02-01
答小明互联网技术分享社区
你的网站是html还是vue，这个需要根据实际场景分析
1人回答了此问题
问
用HTML语言的写的网页，如何部署到远端？逻辑是什么？
编辑于 2023-12-11
答一凡sir
ftp/scp复制到远程服务器的webserver下面，然后就可以访问服务器的webserver下的页面了。
你需要了解下webserver，比如：nginx.
1人回答了此问题
问
1亿html静态页面如何规划文件夹？
编辑于 2023-11-06
答一凡sir
建议对文件和目录进行多层级规划和存储。
比如： /data/html/
001/
002/
...
999/
---/001/
---/002/
...
---/999/
---/---/001/
---/---/002/
...
---/---/999/
这样的3层目录，每一层放1000个目录或者文件，总共可以保存10亿个文件。
普通的 Linux 文件系统（如 ext4）具有很高的文件数量限制，通常可以容纳数十亿个文件。这对于大多数应用来说是足够的。然而，当目录中包含大量文件时，文件系统性能可能会受到影响，如目录查找、文件访问等操作会变得较慢。
一种常见的建议是，在一个目录下的文件数达到几万或几十万时，可以考虑在该目录下创建更多的子目录来分散文件数量。这可以提高文件系统性能和管理文件的效率。
1人回答了此问题
问
如何添加一个新的div？
编辑于 2023-11-01
答杨不易呀
您要不去学习一下 JS 很快就可以实现
1人回答了此问题
问
关于正则表达式的问题？
编辑于 2023-09-27
答一凡sir
.* 改成 [\s\S]*
这里是有中文字符，而不是ASCII码的普通字符，不能直接用 . 来匹配。
1人回答了此问题
问
powerbi能像打开url链接一样打开自己写的html页面？
编辑于 2023-09-18
答一凡sir
Power BI不直接支持在报表中打开自己编写的HTML页面。Power BI是一个商业智能工具，旨在可视化和分析数据。它提供了丰富的数据可视化和分析功能，但并不包含用于打开和显示HTML页面的功能。
但是，您可以通过在Power BI报表中添加一个“Web”控件来实现打开一个外部的HTML页面的目的。您可以使用“Web”控件将包含自己编写的HTML页面的URL链接嵌入到Power BI报表中。用户可以点击该链接以在报表中打开外部HTML页面。
2人回答了此问题
问
document.querySelector始终返回null？arrowLeft 和arrowright获取不到
编辑于 2023-08-17
答一凡sir
如果document.querySelector始终返回null，可能是由于以下几个原因：
元素选择器不正确：document.querySelector接受一个CSS选择器作为参数，并返回第一个匹配该选择器的元素。请确保你传入的选择器是正确的，否则会返回null。例如，如果你要选择一个类名为"example"的元素，应该使用.yifan-online作为选择器，而不是"yifan-online"。
脚本运行的时机不正确：在脚本中使用document.querySelector方法时，确保代码运行时DOM已经加载完毕。你可以将脚本放在window.onload回调函数中，或者将脚本放在页面底部、异步加载脚本等方式来保证脚本在DOM加载完毕后执行。
元素不存在：如果选择器是正确的，但仍然返回null，那么可能是找不到匹配的元素。请确保要查询的元素确实存在于页面中。
1人回答了此问题
问
django：找不到页面？
编辑于 2023-08-18
答一凡sir
注册页面应该访问 127.0.0.1:8000/register/ 呀，你看看是不是登录页面上的注册链接url写错了？
1人回答了此问题
问
我试图写一个上传文件接口的node.js案列，结果得到了一个错误：？
编辑于 2023-08-04
答一凡sir
错误信息打印的还是太少了。
node.js服务端是否有错误信息输出？
需要先核对下这里的file是否上传的是文件。
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];const formData =newFormData();
formData.append('file', file);
1人回答了此问题
问
word转html时，丢失特殊符号样式？
编辑于 2023-07-23
答用户5476286
抱歉，问题我没有描述清楚，我是再用Aspose转html的时候，出现的以上情况，另外正则可能不是一个很好的方案，因为可能还会有别的特殊符号
2人回答了此问题
问
腾讯云社区如何获得积分？
编辑于 2022-10-24
答云帆沧海
写文章，发视频
1人回答了此问题
问
HTMLTestRunner执行所有的测试为什么只能成功执行第一个py文件？
编辑于 2022-10-11
答用户10099661
我看了下，每次只要跑完前两个test文件，跑第三个时候就会报错，说找不到config文件里面的section。这就奇怪了。
但我把前两个test文件删了，从第三个开始跑，那么原来的第三第四个test文件又能跑成功，但是后面的又fail了。
ft3.1: Traceback (most recent call last):
File "C:\Users\jerry\PycharmProjects\Gforce\venv\Test\test_admintaskmanagement.py", line 18, in setUpClass
cls.url = cls.config_read.get_url()
File "C:\Users\jerry\PycharmProjects\Gforce\venv\Test\read_config.py", line 20, in get_url
url = self.cf.get('config','url')
File "C:\Users\jerry\AppData\Local\Programs\Python\Python310\lib\configparser.py", line 782, in get
d = self._unify_values(section, vars)
File "C:\Users\jerry\AppData\Local\Programs\Python\Python310\lib\configparser.py", line 1153, in _unify_values
raise NoSectionError(section) from None
configparser.NoSectionError: No section: 'config'
Traceback (most recent call last):
File "C:\Users\jerry\PycharmProjects\Gforce\venv\Test\test_admintaskmanagement.py", line 18, in setUpClass
cls.url = cls.config_read.get_url()
File "C:\Users\jerry\PycharmProjects\Gforce\venv\Test\read_config.py", line 20, in get_url
url = self.cf.get('config','url')
File "C:\Users\jerry\AppData\Local\Programs\Python\Python310\lib\configparser.py", line 782, in get
d = self._unify_values(section, vars)
File "C:\Users\jerry\AppData\Local\Programs\Python\Python310\lib\configparser.py", line 1153, in _unify_values
raise NoSectionError(section) from None
configparser.NoSectionError: No section: 'config'
1人回答了此问题
问
云开发静态网站托管脚本静态资源为什么加载失败？
编辑于 2022-06-13
答用户9548001
已解决，定位到代码问题
1人回答了此问题
问
为什么pip install -U qcloud-python-sts报错？
编辑于 2022-04-18
答用户9874352
问题没有解决
2人回答了此问题
问
tsf怎么开启swagger？
编辑于 2022-04-12
答用户6224124
请问解决了吗
1人回答了此问题
问
如何同步删除localStorage和div里面其中一个的值？
编辑于 2022-04-05
答EatRice
您好，您这个删除有一行代码可能要修改一下：
list = list.splice(i,1);
否则你的删除不起作用
1人回答了此问题
Hi~
今天想聊点什么呢？
近期活跃用户
腾讯云开发者
