一个快速生成丑陋头像的工具，基于 JavaScript 随机算法，绘制脸部、眼睛、嘴巴、头发和背景。
让领导看后认为你不能委以重任，从而实现上班摸鱼。
作为一个帅哥，生的帅有罪吗？用它可以减少罪恶感！
别低头皇冠会掉！别流泪贱人会笑！做真实的自己，那就丑的更个性吧！
https://github.com/txstc55/ugly-avatar
https://gitee.com/mirrors/Ugly-avatar
一行命令，一分钟轻松搞定SSL证书自动续期！
简单 仅需一行命令。
易用 自动识别，无需更改nginx配置轻松应对复杂配置、老旧系统。
强大 支持通配符域名、多服务器，支持各大厂商的CDN、OSS、LB。
稳定可靠 已服务众多中小企业。
证书到期前15天自动申请SSL证书，自动替换SSL、证书自动重载
nginx：curl -s https://get.httpsok.com/ | bash -s pSZWIiyaNx0vibdznTNm
apache：curl -s https://get.httpsok.com/apache.sh | bash -s pSZWIiyaNx0vibdznTNm
DPanel 提供完善的管理容器的功能，全中文界面易于使用，基于容器易于安装、资源占用低 （镜像 ~50M，内存 ~20M）。
全中文的界面，更适合中文环境使用。
安装简单，占用资源极少。适合各种 Nas设备及盒子。
运行在容器内部，对宿主机没有依赖及侵入，安全且可靠。
完善的容器管理功能，提供域名转发，日志监控等功能。
提供管理容器内部文件的功能，方便快速查看及调试容器内的各种文件。
提供容器之间的关联功能，便于多个容器之间的互相依赖访问。
提供多种环境的基础镜像和模板，可以快速构建属于自己的镜像。
可以通过 Zip 或是 Git 构建镜像，快速实现可持续化构建。
https://space.bilibili.com/346309066
registry.cn-hangzhou.aliyuncs.com/dpanel/dpanel:latest
https://dpanel.cc
https://dpanel.cc/#/zh-cn/install/docker
HexGL 是一款未来主义、快节奏的赛车游戏，由 Thibaut Despoulain 使用 HTML5、Javascript 和 WebGL 构建，是对原版 Wipeout 和 F-Zero 系列的致敬。
查克鸡魔法蛋 Chuck Chicken Magic Egg 是一款萌趣的闯关游戏，主角是一只厉害的功夫鸡，形象设计可爱搞笑，具有十分强大的能力。玩家可以将鸡蛋扔到墙上，利用物理反弹来击杀敌人。这种独特的攻击方式需要玩家掌握好角度和力度，增加了游戏的趣味性和挑战性。玩家需要通过不断闯关来推进游戏进程，每个关卡可能有不同的地形、敌人布局和任务目标。游戏中主角查克鸡可能拥有多种技能，比如获取犀牛冲蛋以穿过装甲坦克、变成鹰眼拯救人质、使用臭鼬技能让敌人晕倒、使用超速猎豹为冰冻的人质加热、变身为蟾鱼游泳通过水池、变身为橡皮蛇轻松抵达敌人等，玩家需要根据不同的关卡情况灵活运用这些技能。
我的世界 MC 网页版，该版本相对较为简单，功能和内容与现在的游戏版本有较大差异，但可以让玩家体验到早期《我的世界》的游戏风格和玩法。我的世界网页版，使用 JavaScript 和 WebGL 构建的网页版 Minecraft 项目，它没有使用第三方库。项目的主要目的是通过使用 Web 组件来重构界面，提供一个基于 WebGL 的 3D 游戏体验。《我的世界》是一款非常受欢迎的沙盒游戏。在这个游戏中，玩家可以在一个虚拟的世界里自由探索、建造和创造。游戏没有特定的目标和任务限制，玩家可以根据自己的喜好和想象力来决定如何发展。
小米公司在2021年对其品牌形象进行了一次重大的升级，这次升级由日本著名设计师 原研哉 亲自操刀，历时三年，设计费用高达200万元人民币。这次LOGO设计的灵感来源于“Mobile Internet”的缩写“MI”，同时也寓意着小米希望让用户省心，提供便捷、温馨的移动互联网服务。
此工具只需几秒钟帮你省下200万元设计费及3年设计时间。工具作者：https://www.naigou.cn/483.html
《Full Screen Mario》全屏版马里奥 是一款使用 HTML5 技术重制的免费在线超级马里奥游戏。正如其名，游戏可以在浏览器中全屏运行，让玩家能够更清晰地看到游戏画面，充分享受游戏的乐趣。并且游戏的画面风格在尽量保持原版风格的基础上，进行了一定的优化和改进，使画面更加清晰、流畅。除了经典关卡外，还具有随机地图生成器。每次生成的随机关卡都具有不同的地形和挑战，大大增加了游戏的可玩性和新鲜感，玩家永远不知道下一个随机生成的关卡会是什么样子。玩家可以通过游戏自带的关卡编辑器，发挥自己的创造力，设计属于自己的马里奥关卡。设计完成后可以自己游玩，感受自己的创作成果。玩家使用键盘的方向键或 “W”“A”“S”“D” 键来控制马里奥的移动、跳跃等动作。“Shift” 键可用于加速或射击（如果在特定关卡中有射击功能）。
《Jelly Mario》（果冻马里奥）是一款基于经典游戏《超级马里奥》改编的同人游戏。在《Jelly Mario》中，游戏的物理规则被完全改变。游戏里的所有元素，包括马里奥、敌人、砖块、水管等都像是由果冻构成，具有弹性和柔软性。例如，马里奥不再像原版游戏中那样可以精确地跳跃和移动，而是像水母一样漂浮在空中，玩家需要通过拉伸和压缩的方式来控制他的移动，这使得游戏的操作难度大大增加。当马里奥碰到障碍物或敌人时，会产生奇特的物理效果。比如碰到蘑菇或乌龟，马里奥可能会分解成无数小方块；如果碰到砖块，砖块会碎成一片一片的。键盘 ↑↓←→控制马里奥触碰蘑菇开始游戏！
今日整理杂物找到了AppleWatch鼻祖 - iPod nano 6 。十四年了，这小家伙电池居然没有鼓包，可惜已经找不到DockConnector数据线无法为其充电。真怀念乔布斯时代的Apple产品，库克你个XXX。
iPod nano（第 6 代）是苹果公司（Apple Inc）于2010年9月2日凌晨1点（北京时间）在美国旧金山芳草地艺术中心发布的一款多媒体播放器 。
小巧便携：iPod nano 6 的尺寸非常小巧，高度为 1.48 英寸（37.5 毫米），宽度为 1.61 英寸（40.9 毫米），深度为 0.35 英寸（8.78 毫米，包括夹子），重量仅为 0.74 盎司（21.1 克），可以轻松放入口袋或挂在身上，方便携带。
大容量存储：有 8GB 和 16GB 两种容量版本可供选择，可以存储大量的音乐、照片和视频等文件。
显示屏：配备 1.54 英寸（对角线）彩色 TFT 显示屏，分辨率为 240x240 像素，每英寸 220 像素，能够清晰地显示专辑封面、照片和视频等内容。
音频播放：支持多种音频格式，包括 AAC（8 至 320 kbps）、受保护的 AAC（来自 iTunes Store）、HE-AAC、MP3（8 至 320 kbps）、MP3 VBR、Audible（格式 2、3、4、Audible 增强音频、AAX 和 AAX+）、Apple Lossless、AIFF 和 WAV 等，频率响应范围为 20Hz 至 20,000Hz，能够提供高质量的音频播放效果。
FM 收音机：具有 FM 收音机功能，并支持美洲、亚洲、澳大利亚、欧洲和日本等地区的设置。还具备实时暂停功能，可以暂停广播并在 15 分钟的缓冲区内倒回。
传感器：内置加速度计，可以实现一些基于手势的操作，例如摇晃切换歌曲等。
电池续航：内置可充电锂离子电池，充满电后可提供长达 24 小时的音乐播放时间。充电方式可以通过 USB 连接到计算机系统或使用单独出售的电源适配器，快速充电时间约为 1.5 小时（可充至电池容量的 80%），完全充电时间约为 3 小时。
多种语言支持：用户界面支持 29 种语言，包括阿拉伯语、巴西葡萄牙语、粤语（繁体中文）、克罗地亚语、捷克语、丹麦语、荷兰语、英语、芬兰语、法语、德语、希腊语、希伯来语、匈牙利语、意大利语、日语、韩语、挪威语、波兰语、葡萄牙语、罗马尼亚语、俄语、简体中文、斯洛伐克语、西班牙语、瑞典语、泰语、繁体中文、土耳其语。歌曲、专辑和艺术家信息还可以以保加利亚语、塞尔维亚语、斯洛文尼亚语、乌克兰语和越南语显示。健身语音反馈支持七种语言：中文（普通话）、英语（美国）、法语（法国）、德语、意大利语、日语、西班牙语（西班牙）。语音旁白支持 29 种语言。
其他功能：包括基于手势的屏幕阅读器、可调节背光设置的高分辨率 LCD 显示屏以方便在低光环境下阅读、黑底白字显示、单声道音频等。此外，它还需要与配备 USB 2.0 端口、特定操作系统（Mac 电脑需 OS X v10.5.8 或更高版本，PC 需 Windows 7、Vista 或 XP）以及 iTunes 10 或更高版本的设备配合使用。
系统：飞牛OS CPU：AMD R7 5825U 内存：DDR4 32G
硬盘：250G西数固态（系统及Docker） 500G七彩虹固态（应用及备份） 4T希捷监控（存放电影） 3T希捷（剧集及备份）
交换机：TP SH1008 UPS：山克SK2000（用于NAS供电）硕天UT650EGC（用于路由、交换机、光猫供电）目前飞牛OS还没有UPS管理功能。
飞牛OS 基于最新的 Linux 内核（Debian 发行版）进行深度开发，能兼容主流的 x86 硬件。飞牛影视可帮助用户轻松搭建影视服务器，支持 APP 远程下载解析种子，自动刮削整理成海报墙（电影准确率 99%），自动下载字幕，兼容主流硬件智能转码，多端同步，支持蓝光杜比。飞牛影视是我用过刮削最准确、速度最快、操作最简单的NAS影音应用，AMD集显也能正常使用。
目前飞牛OS处于公测阶段！功能存在一些不足如：音乐应用、相册AI功能、虚拟机、UPS功能等。存储功能方面存在一定缺失，如 Raid 模式有限，没有 Raid50、60，且只能使用 Btrfs 文件系统，共享功能不足，不支持苹果的 AFP 和块存储 Iscsi 等，缺乏一些高级功能如全闪必备的 Rdma 高级功能、Linux 内核的 Bcache 加速缓存功能，HDD 无 SSD 加速，写入性能差。但对于一款新发布的系统，其未来的发展和完善值得期待。
WALKER75三模机械键盘
个性的万向摇杆可模拟鼠标 网页驱动 乳胶全局手托
轴体：暗莺轴V2 电池：5000mAh 半铝外壳：铝合金上盖+PC底壳
结构：GASKET 定位板：FR4 键帽：五面热升华
偶然在PDD上看到一款哈曼卡顿代工的拆机音响，据说用于高端投影仪。
立即下单一对开搞，结果音质超乎想象，不愧是哈曼卡顿！
《劲舞团》一款舞蹈类休闲音乐网游，由韩国 T3 Entertainment 开发。改编自韩国畅销漫画《Audition》，讲述了四个男孩组建摇滚乐队的故事，T3 将该故事与当时韩国流行的跳舞机游戏《DDR》相结合，并仿照日本公司 enix 于 1998 年在 PS 平台上推出的舞蹈动作游戏《Bust A Groove》，创造出了这款游戏。 通过键盘上的方向键或指定按键，根据屏幕上出现的箭头指示，在合适的时机按下相应按键，以完成舞蹈动作。玩家操作的准确性和节奏感，直接影响舞蹈表现和得分。
《神庙逃亡 2》是由 Imangi Studios 开发的一款动作冒险游戏，于 2013 年 1 月推出。玩家扮演一名勇敢的探险家，在神秘的神庙中奔跑，逃离恶魔守卫的追赶。前方是无尽的道路，玩家需要勇往直前，运用各种技巧躲避危险。
游戏画面精致，场景设计丰富多样，有沙漠、丛林、雪山等地形，每个地方都充满神秘和未知，能给玩家身临其境的感觉。音效方面也比较激昂，增强了游戏的紧张感和刺激感。操作简单直观，通过滑动屏幕来控制角色的行动，如向上滑动屏幕跳跃，向下滑动屏幕滑行，左右滑动屏幕转弯。玩家需要及时躲避各种障碍物，像树枝、陷阱、断崖等，还需在适当的时候做出跳跃、滑行、转弯等动作，这对玩家的操作反应能力有一定要求。
一款非常简约的CSS日月更替加载动画源码，可用于美化网站加载、外链跳转。
动画场景包括森林（有多棵树）、帐篷（有屋顶、门等）、地面、壁炉（有支撑、横杆、挂钩、锅等）以及时间展示（包括白天、夜晚、月亮、星星等）。同时，还定义了多个动画关键帧，如 stageBackground（场景背景颜色变化）、earthRotation（地球旋转）、sunrise（日出效果）、moonOrbit（月亮轨道）、nightTime（夜晚时间）、hotPan（热锅效果）、heat（热量效果）、smoke（烟雾效果）、fire（火焰效果）、treeShake（树摇动效果）、fireParticles（火焰粒子效果）、fireLines（火线效果）等。此外，还对场景中的各个元素进行了样式设置，如森林中树的位置、大小、树枝形状，帐篷的屋顶、门的样式，地面的布局，壁炉的组成部分等。
/* From Uiverse.io by Admin12121 */ <div class="scene"> <div class="forest"> <div class="tree tree1"> <div class="branch branch-top"></div> <div class="branch branch-middle"></div> </div> <div class="tree tree2"> <div class="branch branch-top"></div> <div class="branch branch-middle"></div> <div class="branch branch-bottom"></div> </div> <div class="tree tree3"> <div class="branch branch-top"></div> <div class="branch branch-middle"></div> <div class="branch branch-bottom"></div> </div> <div class="tree tree4"> <div class="branch branch-top"></div> <div class="branch branch-middle"></div> <div class="branch branch-bottom"></div> </div> <div class="tree tree5"> <div class="branch branch-top"></div> <div class="branch branch-middle"></div> <div class="branch branch-bottom"></div> </div> <div class="tree tree6"> <div class="branch branch-top"></div> <div class="branch branch-middle"></div> <div class="branch branch-bottom"></div> </div> <div class="tree tree7"> <div class="branch branch-top"></div> <div class="branch branch-middle"></div> <div class="branch branch-bottom"></div> </div> </div> <div class="tent"> <div class="roof"></div> <div class="roof-border-left"> <div class="roof-border roof-border1"></div> <div class="roof-border roof-border2"></div> <div class="roof-border roof-border3"></div> </div> <div class="entrance"> <div class="door left-door"> <div class="left-door-inner"></div> </div> <div class="door right-door"> <div class="right-door-inner"></div> </div> </div> </div> <div class="floor"> <div class="ground ground1"></div> <div class="ground ground2"></div> </div> <div class="fireplace"> <div class="support"></div> <div class="support"></div> <div class="bar"></div> <div class="hanger"></div> <div class="smoke"></div> <div class="pan"></div> <div class="fire"> <div class="line line1"> <div class="particle particle1"></div> <div class="particle particle2"></div> <div class="particle particle3"></div> <div class="particle particle4"></div> </div> <div class="line line2"> <div class="particle particle1"></div> <div class="particle particle2"></div> <div class="particle particle3"></div> <div class="particle particle4"></div> </div> <div class="line line3"> <div class="particle particle1"></div> <div class="particle particle2"></div> <div class="particle particle3"></div> <div class="particle particle4"></div> </div> </div> </div> <div class="time-wrapper"> <div class="time"> <div class="day"></div> <div class="night"> <div class="moon"></div> <div class="star star1 star-big"></div> <div class="star star2 star-big"></div> <div class="star star3 star-big"></div> <div class="star star4"></div> <div class="star star5"></div> <div class="star star6"></div> <div class="star star7"></div> </div> </div> </div> </div>
/* From Uiverse.io by Admin12121 */
@keyframes stageBackground {
0%, 10%, 90%, 100% {
background-color: #00B6BB;
}
25%, 75% {
background-color: #0094bd;
}
}
@keyframes earthRotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes sunrise {
0%, 10%, 90%, 100% {
box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);
}
25%, 75% {
box-shadow: 0 0 0 0 #5ad6bd, 0 0 0 0 #4acead, 0 0 0 0 rgba(74, 206, 173, 0.6), 0 0 0 0 rgba(74, 206, 173, 0.3);
}
}
@keyframes moonOrbit {
25% {
transform: rotate(-60deg);
}
50% {
transform: rotate(-60deg);
}
75% {
transform: rotate(-120deg);
}
0%, 100% {
transform: rotate(-180deg);
}
}
@keyframes nightTime {
0%, 90% {
opacity: 0;
}
50%, 75% {
opacity: 1;
}
}
@keyframes hotPan {
0%, 90% {
background-color: #74667e;
}
50%, 75% {
background-color: #b2241c;
}
}
@keyframes heat {
0%, 90% {
box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.3);
}
50%, 75% {
box-shadow: inset 0 -2px 0 0 white;
}
}
@keyframes smoke {
0%, 50%, 90%, 100% {
opacity: 0;
}
50%, 75% {
opacity: 0.7;
}
}
@keyframes fire {
0%, 90%, 100% {
opacity: 0;
}
50%, 75% {
opacity: 1;
}
}
@keyframes treeShake {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-2deg);
}
40% {
transform: rotate(4deg);
}
50% {
transform: rotate(-4deg);
}
60% {
transform: rotate(6deg);
}
75% {
transform: rotate(-6deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes fireParticles {
0% {
height: 30%;
opacity: 1;
top: 75%;
}
25% {
height: 25%;
opacity: 0.8;
top: 40%;
}
50% {
height: 15%;
opacity: 0.6;
top: 20%;
}
75% {
height: 10%;
opacity: 0.3;
top: 0;
}
100% {
opacity: 0;
}
}
@keyframes fireLines {
0%, 25%, 75%, 100% {
bottom: 0;
}
50% {
bottom: 5%;
}
}
.scene {
display: flex;
margin: 0 auto 80px auto;
justify-content: center;
align-items: flex-end;
width: 400px;
height: 300px;
position: relative;
}
.forest {
display: flex;
width: 75%;
height: 90%;
position: relative;
}
.tree {
display: block;
width: 50%;
position: absolute;
bottom: 0;
opacity: 0.4;
}
.tree .branch {
width: 80%;
height: 0;
margin: 0 auto;
padding-left: 40%;
padding-bottom: 50%;
overflow: hidden;
}
.tree .branch:before {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -600px;
border-left: 600px solid transparent;
border-right: 600px solid transparent;
border-bottom: 950px solid #000;
}
.tree .branch.branch-top {
transform-origin: 50% 100%;
animation: treeShake 0.5s linear infinite;
}
.tree .branch.branch-middle {
width: 90%;
padding-left: 45%;
padding-bottom: 65%;
margin: 0 auto;
margin-top: -25%;
}
.tree .branch.branch-bottom {
width: 100%;
padding-left: 50%;
padding-bottom: 80%;
margin: 0 auto;
margin-top: -40%;
}
.tree1 {
width: 31%;
}
.tree1 .branch-top {
transition-delay: 0.3s;
}
.tree2 {
width: 39%;
left: 9%;
}
.tree2 .branch-top {
transition-delay: 0.4s;
}
.tree3 {
width: 32%;
left: 24%;
}
.tree3 .branch-top {
transition-delay: 0.5s;
}
.tree4 {
width: 37%;
left: 34%;
}
.tree4 .branch-top {
transition-delay: 0.6s;
}
.tree5 {
width: 44%;
left: 44%;
}
.tree5 .branch-top {
transition-delay: 0.7s;
}
.tree6 {
width: 34%;
left: 61%;
}
.tree6 .branch-top {
transition-delay: 0.2s;
}
.tree7 {
width: 24%;
left: 76%;
}
.tree7 .branch-top {
transition-delay: 0.1s;
}
.tent {
width: 60%;
height: 25%;
position: absolute;
bottom: -0.5%;
right: 15%;
z-index: 1;
text-align: right;
}
.roof {
display: inline-block;
width: 45%;
height: 100%;
margin-right: 10%;
position: relative;
/*bottom: 0;
right: 9%;*/
z-index: 1;
border-top: 4px solid #4D4454;
border-right: 4px solid #4D4454;
border-left: 4px solid #4D4454;
border-top-right-radius: 6px;
transform: skew(30deg);
box-shadow: inset -3px 3px 0px 0px #F7B563;
/*background: linear-gradient(
to bottom,
rgba(246,212,132,1) 0%,
rgba(246,212,132,1) 24%,
rgba(#F0B656,1) 25%,
rgba(#F0B656,1) 74%,
rgba(235,151,53,1) 75%,
rgba(235,151,53,1) 100%
);*/
background: #f6d484;
}
.roof:before {
content: "";
width: 70%;
height: 70%;
position: absolute;
top: 15%;
left: 15%;
z-index: 0;
border-radius: 10%;
background-color: #E78C20;
}
.roof:after {
content: "";
height: 75%;
width: 100%;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
background: linear-gradient(to bottom, rgba(231, 140, 32, 0.4) 0%, rgba(231, 140, 32, 0.4) 64%, rgba(231, 140, 32, 0.8) 65%, rgba(231, 140, 32, 0.8) 100%);
}
.roof-border-left {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 1%;
height: 125%;
position: absolute;
top: 0;
left: 35.7%;
z-index: 1;
transform-origin: 50% 0%;
transform: rotate(35deg);
}
.roof-border-left .roof-border {
display: block;
width: 100%;
border-radius: 2px;
border: 2px solid #4D4454;
}
.roof-border-left .roof-border1 {
height: 40%;
}
.roof-border-left .roof-border2 {
height: 10%;
}
.roof-border-left .roof-border3 {
height: 40%;
}
.door {
width: 55px;
height: 92px;
position: absolute;
bottom: 2%;
overflow: hidden;
z-index: 0;
transform-origin: 0 105%;
}
.left-door {
transform: rotate(35deg);
position: absolute;
left: 13.5%;
bottom: -3%;
z-index: 0;
}
.left-door .left-door-inner {
width: 100%;
height: 100%;
transform-origin: 0 105%;
transform: rotate(-35deg);
position: absolute;
top: 0;
overflow: hidden;
background-color: #EDDDC2;
}
.left-door .left-door-inner:before {
content: "";
width: 15%;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: repeating-linear-gradient(#D4BC8B, #D4BC8B 4%, #E0D2A8 5%, #E0D2A8 10%);
}
.left-door .left-door-inner:after {
content: "";
width: 50%;
height: 100%;
position: absolute;
top: 15%;
left: 10%;
transform: rotate(25deg);
background-color: #fff;
}
.right-door {
height: 89px;
right: 21%;
transform-origin: 0 105%;
transform: rotate(-30deg) scaleX(-1);
position: absolute;
bottom: -3%;
z-index: 0;
}
.right-door .right-door-inner {
width: 100%;
height: 100%;
transform-origin: 0 120%;
transform: rotate(-30deg);
position: absolute;
bottom: 0px;
overflow: hidden;
background-color: #EFE7CF;
}
.right-door .right-door-inner:before {
content: "";
width: 50%;
height: 100%;
position: absolute;
top: 15%;
right: -28%;
z-index: 1;
transform: rotate(15deg);
background-color: #524A5A;
}
.right-door .right-door-inner:after {
content: "";
width: 50%;
height: 100%;
position: absolute;
top: 15%;
right: -20%;
transform: rotate(20deg);
background-color: #fff;
}
.floor {
width: 80%;
position: absolute;
right: 10%;
bottom: 0;
z-index: 1;
}
.floor .ground {
position: absolute;
border-radius: 2px;
border: 2px solid #4D4454;
}
.floor .ground.ground1 {
width: 65%;
left: 0;
}
.floor .ground.ground2 {
width: 30%;
right: 0;
}
.fireplace {
display: block;
width: 24%;
height: 20%;
position: absolute;
left: 5%;
}
.fireplace:before {
content: "";
display: block;
width: 8%;
position: absolute;
bottom: -4px;
left: 2%;
border-radius: 2px;
border: 2px solid #4D4454;
background: #4D4454;
}
.fireplace .support {
display: block;
height: 105%;
width: 2px;
position: absolute;
bottom: -5%;
left: 10%;
border: 2px solid #4D4454;
}
.fireplace .support:before {
content: "";
width: 100%;
height: 15%;
position: absolute;
top: -18%;
left: -4px;
border-radius: 2px;
border: 2px solid #4D4454;
transform-origin: 100% 100%;
transform: rotate(45deg);
}
.fireplace .support:after {
content: "";
width: 100%;
height: 15%;
position: absolute;
top: -18%;
left: 0px;
border-radius: 2px;
border: 2px solid #4D4454;
transform-origin: 0 100%;
transform: rotate(-45deg);
}
.fireplace .support:nth-child(1) {
left: 85%;
}
.fireplace .bar {
width: 100%;
height: 2px;
border-radius: 2px;
border: 2px solid #4D4454;
}
.fireplace .hanger {
display: block;
width: 2px;
height: 25%;
margin-left: -4px;
position: absolute;
left: 50%;
border: 2px solid #4D4454;
}
.fireplace .pan {
display: block;
width: 25%;
height: 50%;
border-radius: 50%;
border: 4px solid #4D4454;
position: absolute;
top: 25%;
left: 35%;
overflow: hidden;
animation: heat 5s linear infinite;
}
.fireplace .pan:before {
content: "";
display: block;
height: 53%;
width: 100%;
position: absolute;
bottom: 0;
z-index: -1;
border-top: 4px solid #4D4454;
background-color: #74667e;
animation: hotPan 5s linear infinite;
}
.fireplace .smoke {
display: block;
width: 20%;
height: 25%;
position: absolute;
top: 25%;
left: 37%;
background-color: white;
filter: blur(5px);
animation: smoke 5s linear infinite;
}
.fireplace .fire {
display: block;
width: 25%;
height: 120%;
position: absolute;
bottom: 0;
left: 33%;
z-index: 1;
animation: fire 5s linear infinite;
}
.fireplace .fire:before {
content: "";
display: block;
width: 100%;
height: 2px;
position: absolute;
bottom: -4px;
z-index: 1;
border-radius: 2px;
border: 1px solid #efb54a;
background-color: #efb54a;
}
.fireplace .fire .line {
display: block;
width: 2px;
height: 100%;
position: absolute;
bottom: 0;
animation: fireLines 1s linear infinite;
}
.fireplace .fire .line2 {
left: 50%;
margin-left: -1px;
animation-delay: 0.3s;
}
.fireplace .fire .line3 {
right: 0;
animation-delay: 0.5s;
}
.fireplace .fire .line .particle {
height: 10%;
position: absolute;
top: 100%;
z-index: 1;
border-radius: 2px;
border: 2px solid #efb54a;
animation: fireParticles 0.5s linear infinite;
}
.fireplace .fire .line .particle1 {
animation-delay: 0.1s;
}
.fireplace .fire .line .particle2 {
animation-delay: 0.3s;
}
.fireplace .fire .line .particle3 {
animation-delay: 0.6s;
}
.fireplace .fire .line .particle4 {
animation-delay: 0.9s;
}
.time-wrapper {
display: block;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.time {
display: block;
width: 100%;
height: 200%;
position: absolute;
transform-origin: 50% 50%;
transform: rotate(270deg);
animation: earthRotation 5s linear infinite;
}
.time .day {
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 20%;
left: 40%;
border-radius: 50%;
box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);
animation: sunrise 5s ease-in-out infinite;
background-color: #ef9431;
}
.time .night {
animation: nightTime 5s ease-in-out infinite;
}
.time .night .star {
display: block;
width: 4px;
height: 4px;
position: absolute;
bottom: 10%;
border-radius: 50%;
background-color: #fff;
}
.time .night .star-big {
width: 6px;
height: 6px;
}
.time .night .star1 {
right: 23%;
bottom: 25%;
}
.time .night .star2 {
right: 35%;
bottom: 18%;
}
.time .night .star3 {
right: 47%;
bottom: 25%;
}
.time .night .star4 {
right: 22%;
bottom: 20%;
}
.time .night .star5 {
right: 18%;
bottom: 30%;
}
.time .night .star6 {
right: 60%;
bottom: 20%;
}
.time .night .star7 {
right: 70%;
bottom: 23%;
}
.time .night .moon {
display: block;
width: 25px;
height: 25px;
position: absolute;
bottom: 22%;
right: 33%;
border-radius: 50%;
transform: rotate(-60deg);
box-shadow: 9px 9px 3px 0 white;
filter: blur(1px);
animation: moonOrbit 5s ease-in-out infinite;
}
.time .night .moon:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: -9px;
left: 9px;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05), 0 0 0 15px rgba(255, 255, 255, 0.05), 0 0 0 25px rgba(255, 255, 255, 0.05), 0 0 0 35px rgba(255, 255, 255, 0.05);
background-color: rgba(255, 255, 255, 0.2);
}一款非常简约的CSS钢铁侠飞行动画效果加载源码，可用于美化网站加载、外链跳转。
HTML 代码结构包括<head>部分引入样式表，<body>部分包含钢铁侠动画的相关元素，如<div>、<span>和<img>等。
CSS 部分定义了各种动画效果，如钢铁侠的飞行动画flight、喷射效果spray、线条移动linemove、文本移动textmove和省略号移动ellipsismove等。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>钢铁侠加载动画源码</title> <link rel="stylesheet" href="./保存的.css"> </head> <body> <div> <div> <span></span> <span></span> <span></span> <span></span> <img src="iron_man.png"> </div> <div>正在为您加载！</div> <div> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background: linear-gradient(to top, #70b9f1, #1e3c55);
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.iron-man {
position: relative;
animation: flight 0.5s linear infinite;
}
.iron-man img {
width: 250px;
position: relative;
z-index: 1;
}
.iron-man span {
width: 30px;
height: 1px;
background-color: #dcbe7f;
position: absolute;
top: 12px;
z-index: 0;
animation: spray 0.3s linear infinite;
}
.iron-man span:nth-child(2) {
top: 13px;
animation-delay: -1s;
}
.iron-man span:nth-child(3) {
top: 14px;
animation-delay: -2s;
}
.iron-man span:nth-child(4) {
top: 15px;
animation-delay: -1.5s;
}
.lines span {
position: absolute;
width: 20%;
height: 2px;
background-color: #fff;
animation: linemove linear infinite;
}
.lines span:nth-child(1) {
top: 20%;
animation-duration: 0.6s;
animation-delay: -5s;
}
.lines span:nth-child(2) {
top: 40%;
animation-duration: 0.8s;
animation-delay: -1s;
}
.lines span:nth-child(3) {
top: 60%;
animation-duration: 0.6s;
animation-delay: 0s;
}
.lines span:nth-child(4) {
top: 80%;
animation-duration: 0.5s;
animation-delay: -3s;
}
.loading-text {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 58%;
color: #fff;
font-size: 14px;
letter-spacing: 3px;
white-space: nowrap;
width: 250px;
animation: textmove 3s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}
.loading-text::after {
content: "";
animation: ellipsismove 3s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}
@keyframes flight {
0% {
transform: translate(2px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -3px) rotate(-1deg);
}
20% {
transform: translate(-2px, 0px) rotate(1deg);
}
30% {
transform: translate(1px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 3px) rotate(-1deg);
}
60% {
transform: translate(-1px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-2px, -1px) rotate(1deg);
}
90% {
transform: translate(2px, 1px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
@keyframes spray {
0% {
left: 0;
opacity: 1;
}
100% {
left: -80px;
opacity: 0;
}
}
@keyframes linemove {
0% {
left: 200%;
opacity: 1;
}
100% {
left: -200%;
opacity: 0;
}
}
@keyframes textmove {
0% {
margin-left: 500px;
opacity: 0;
}
30%,
70% {
margin-left: 0;
opacity: 1;
}
100% {
margin-left: -500px;
opacity: 0;
}
}
@keyframes ellipsismove {
0% {
margin-left: 500px;
opacity: 0;
content: "";
}
30% {
margin-left: 0;
opacity: 1;
content: ".";
}
50% {
margin-left: 0;
opacity: 1;
content: "..";
}
70% {
margin-left: 0;
opacity: 1;
content: "...";
}
100% {
margin-left: -500px;
opacity: 0;
content: "";
}
}
Photopea 是一个免费的在线照片编辑器
免费且功能强大，提供专业级工具，可在浏览器中直接使用，无需下载。
完全本地化运行，文件不会上传，所有文件在本地设备上即时打开。
具有成本效益，可享受所有高级功能而无需花费。
方便易用，无需在设备上安装沉重的软件。
可在任何设备上运行，硬件越好运行效果越好。
提供全套编辑工具，支持 PSD 格式以及多种其他格式，包括完美支持 RAW 格式。
具有先进的 AI 功能，可一键去除背景或通过文本描述替换图像内容。
拥有图层、蒙版、图层样式、智能对象、调整图层、通道、路径等所有基本功能。
提供调整和滤镜功能，包括 Levels、Curves、Gaussian Blur、Liquify、Puppet Warp 等。
支持创建和编辑矢量图形。
OHTTPS致力于为用户提供零门槛、简单、高效的HTTPS证书服务。支持证书一站式管理、自动化更新、自动化部署、自动化监控及告警等。OHTTPS 可在证书到期前进行自动化更新和部署，支持部署至各大云计算平台的CDN、OSS、LB等、宝塔面板、Docker、SSH、API、Webhook等，解决用户证书多平台部署及维护繁杂的问题。
提供免费 HTTPS 证书服务，具有自动化更新、自动化部署、自动化监控等功能。证书由世界顶级权威证书颁发机构 Let's Encrypt 或 Sectigo 颁发，兼容 99.99% 以上的浏览器。用户可选择证书类型（单域名、多域名、泛域名）并输入域名，进行域名所有权验证（DNS 解析、CNAME 解析、TXT 文件验证等）后颁发证书并下载。该服务支持证书一站式管理，可自动化部署至云、docker 等平台，并提供证书即将到期告警及站点证书监控服务，支持多种告警通知方式。
可申请免费单域名证书、多域名证书、泛域名证书 有效期为90天。
是一个用于管理 Docker 环境的可视化 Web 界面工具。
查看容器列表：可以清晰地展示当前运行以及已停止的容器信息，包括容器名称、ID、状态、创建时间等。
容器操作：通过 DockerUI 可以方便地启动、停止、重启、删除容器等操作，而无需在命令行中输入复杂的 Docker 命令。
查看容器详情：点击特定容器可以查看其详细信息，如容器内部运行的进程、网络配置、挂载的卷等。
镜像列表：展示本地存储的 Docker 镜像，包含镜像名称、标签、大小等信息。
拉取和推送镜像：能够从 Docker 仓库拉取新的镜像，或者将本地构建的镜像推送到远程仓库，方便在不同环境中部署应用。
镜像构建：有些 DockerUI 版本提供基于界面的镜像构建功能，通过简单的配置和选择构建上下文，触发镜像构建流程。
系统资源查看：实时监控 Docker 主机的系统资源使用情况，如 CPU 使用率、内存占用、磁盘空间、网络流量等。
容器资源分配：了解每个容器对主机资源的占用情况，有助于合理分配和优化资源，避免资源冲突和浪费。
对于不熟悉 Docker 命令行操作的用户来说，DockerUI 提供了一个直观、可视化的操作界面，降低了使用 Docker 的门槛。用户可以通过简单的点击和输入操作完成复杂的容器和镜像管理任务。
快速定位和管理容器与镜像，在处理多个容器和复杂的 Docker 环境时，能够节省大量的时间和精力。通过批量操作等功能，可以同时对多个容器或镜像进行处理，提高管理效率。
开发者的仓库地址：https://hub.docker.com/r/joinsunsoft/docker.ui
docker run --restart always --name docker-ui -d -v /var/run/docker.sock:/var/run/docker.sock -p 18999:8999 joinsunsoft/docker.ui:latest
国内镜像：
docker run --restart always --name docker-ui -d -v /var/run/docker.sock:/var/run/docker.sock -p 18999:8999 registry.cn-hangzhou.aliyuncs.com/jast-docker/docker.ui:latest
访问地址：http://localhost:18999/login.html，进入登录页面。默认的用户名和密码为：ginghan / 123456
Certd 是一个免费全自动申请和自动部署更新SSL证书的工具。
不仅支持证书申请过程自动化，还可以自动化部署更新证书，让你的证书永不过期。全自动申请证书（支持阿里云、腾讯云、华为云、Cloudflare等各种途径注册的域名）、全自动部署更新证书（目前支持部署到主机、部署到阿里云、腾讯云等）、支持通配符域名/泛域名，支持多个域名打到一个证书上。支持邮件通知、私有化部署，保障安全。
registry.cn-shenzhen.aliyuncs.com/handsfree/certd:latest
https://hub.docker.com/r/greper/certd
docker pull greper/certd:latest
https://github.com/certd/certd/blob/v2/step.md
Swapy 一个简单的 JavaScript 工具，只需几行代码即可将任何布局转换为拖放交换布局。
指定插槽和项目：为插槽元素添加data-swapy-slot属性，为项目元素添加data-swapy-item属性，还可以通过data-swapy-handle指定手柄，通过 CSS 样式[data-swapy-highlighted]自定义当前选择的插槽。
使用 Swapy：获取包含插槽和项目的容器元素，将其传递给createSwapy()，默认使用dynamic动画，可通过动画配置选项更改，并且可以随时禁用和启用。
监听事件：可以监听交换事件，交换事件会返回新顺序的三种版本（map、object和array），方便进行相关操作，如存储新顺序。
pnpm install swapy
<script src="https://unpkg.com/swapy/dist/swapy.min.js"></script>
<script>
// You can then use it like this
const swapy = Swapy.createSwapy(container)
</script>
龙行于空，腾云驾雾，其气势之盛大，如狂风暴雨般令人震撼。云雾在其身边翻涌，仿佛在朝拜这至高无上的王者。龙的咆哮声如雷霆万钧，震耳欲聋，可使山河颤抖，百兽畏惧。它的威严与霸气，让人感受到一种无与伦比的力量和尊贵。大圣之气势，勇猛无畏。手持如意金箍棒，上捣天宫，下闹地府，无惧众神诸魔。那火眼金睛，光芒四射，仿佛能看穿世间一切虚妄与邪恶。面对千军万马，亦毫无惧色，冲锋在前，横扫八方，如入无人之境。
STL 模型是一种广泛应用于三维打印、CAD/CAM、虚拟现实和游戏开发等领域的文件格式。它以三角面片的形式表示三维物体的表面几何形状，具有简单直观、易于处理和存储的特点。
⚠️注意：模型文件由网友分享，禁止用任何商业目的，包含打印成品出售、付费下载模型文件等！
