笒鬼鬼 - HTML源码
type: channel
link: https://blog.cenguigui.cn/tag/HTML/
items: ai制作,卡片歌曲
items: HTML用canvas实现网页樱花
items: 音乐播放盒子
items: 给网站加个播放器-思幻版
items: 网易云播放器-仅供学习
items: CSS蝴蝶
items: 404模版
items: HTML切换按钮
items: css svg独角鲸
items: 简易的时钟效果

ai制作,卡片歌曲
type: item
date: 2026-03-25T17:48:10+08:00
description: 无聊试试ai发展到啥地步，生成了这个页面内置网易接口，可以修改id解析html代码如下： 笒鬼鬼 MAKE YOUR OWN I' ll always be you. Joyly present I'm confident will change you're someone special in the mood #cute!! <defs> <linearGradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop offset="0" stop-color="#ffffff" stop-opacity="0.95" /> <stop offset="1" stop-color="#f3f3f3" stop-opacity="0.88" /> </linearGradient> </defs> <g fill="url(#g)" stroke="rgba(0,0,0,0.25)" stroke-width="2"> <g transform="translate(20,34)"> <ellipse cx="25" cy="38" rx="28" ry="22" /> <ellipse cx="13" cy="9" rx="9" ry="20" /> <ellipse cx="35" cy="9" rx="9" ry="20" /> <circle cx="16" cy="34" r="3" fill="#333" stroke="none" /> <circle cx="34" cy="34" r="3" fill="#333" stroke="none" /> <circle cx="25" cy="42" r="2.6" fill="#ff8aa8" stroke="none" /> </g> <g transform="translate(78,30)"> <ellipse cx="25" cy="42" rx="30" ry="24" /> <ellipse cx="12" cy="10" rx="10" ry="22" /> <ellipse cx="38" cy="10" rx="10" ry="22" /> <circle cx="16" cy="38" r="3" fill="#333" stroke="none" /> <circle cx="34" cy="38" r="3" fill="#333" stroke="none" /> <circle cx="25" cy="47" r="2.6" fill="#ff8aa8" stroke="none" /> </g> <g transform="translate(140,34)"> <ellipse cx="25" cy="38" rx="28" ry="22" /> <ellipse cx="13" cy="9" rx="9" ry="20" /> <ellipse cx="35" cy="9" rx="9" ry="20" /> <circle cx="16" cy="34" r="3" fill="#333" stroke="none" /> <circle cx="34" cy="34" r="3" fill="#333" stroke="none" /> <circle cx="25" cy="42" r="2.6" fill="#ff8aa8" stroke="none" /> </g> </g> <g fill="#ff7aa6" opacity="0.9"> <path d="M107 20c-5-10 9-18 15-9 6-9 20-1 15 9-4 8-14 13-15 14-1-1-11-6-15-14z" /> </g> 0:00 0:00 <path d="M7 5h2v14H7V5Zm4.2 7 9-7v14l-9-7Z" /> <path d="M7 6h4v12H7V6Zm6 0h4v12h-4V6Z" /> <path d="M8 5v14l11-7L8 5Z" /> <path d="M15 5h2v14h-2V5ZM12.8 12l-9 7V5l9 7Z" /> I LOVE ALL THE STARS IN THE SKY, BUT THEY ARE NOTHING COMPARED TO THE ONES IN YOUR EYES I ONLY WISH TO FACE THE SEA, WITH SPRING FLOWER BLOSSOMING. 人间忽晚,山河已秋！ <g> <rect x="18" y="18" width="124" height="48" r…

HTML用canvas实现网页樱花
type: item
date: 2024-05-29T09:44:00+08:00
description: 直接上代码

音乐播放盒子
type: item
date: 2024-04-26T15:45:59+08:00
description: 最近捣鼓了个播放盒子更新了搜索新增播放全部歌曲新增添加播放歌曲bug过功能少，有能力者自己再改造下演示图：演示地址： 点击前往演示地址：blog.cenguigui.cn/player {hide}{cloud title="音乐播放器" type="lz" url="https://cenguigui.lanzouw.com/iyLAD1wknoij" password=""/}{/hide}

给网站加个播放器-思幻版
type: item
date: 2024-03-26T17:13:00+08:00
description: 只需要加 中加入一行代码即可{callout color="#73aaff"} {/callout}代码结构：若不行引入本站，可以自己下载搭建{alert type="info"}源码下载地址：{/alert}{hide}https://cenguigui.lanzouw.com/iWfzv1sp5b4f{/hide}

网易云播放器-仅供学习
type: item
date: 2024-03-26T11:46:00+08:00
description: {message type="success" content="演示地址："/}点我查看演示：网易播放器 https://music.cenguigui.cn/music/ {message type="success" content="下载地址："/}{hide}https://cenguigui.lanzouw.com/i76xL1sns9wh{/hide}

CSS蝴蝶
type: item
date: 2024-03-20T13:59:05+08:00
description: @-webkit-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @-moz-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @-ms-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @-o-keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 720deg); -moz-transform: rotate3d(0, 1, 0, 720deg); -ms-transform: rotate3d(0, 1, 0, 720deg); -o-transform: rotate3d(0, 1, 0, 720deg); transform: rotate3d(0, 1, 0, 720deg); } } @keyframes rotating { 0% { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0,…

404模版
type: item
date: 2024-03-17T20:21:55+08:00
description: LOGO 首页 联系我们 关于我们 404 404 哦！看起来你迷路了！ 请返回主页！ i dare!

HTML切换按钮
type: item
date: 2024-03-17T20:10:00+08:00
description: HTML代码 On Off CSS代码@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap"); :root { --highlight-left: 0; --pagination-width: 0; } html { height: 100%; } body { font-family: sans-serif; height: 100%; margin: 0; font-family: "Comfortaa", cursive; background-color: #eef3f7; user-select: none; display: flex; align-items: center; justify-content: center; } .radio-checked { position: relative; font-size: 34px; letter-spacing: 1px; box-shadow: -6px -5px 14px 3px #fff, 7px 7px 12px 2px #d0d8e3; border-radius: 70px; } .radio-checked_input { display: none; } .radio-checked_input:checked + .radio-checked_label--on { color: #47cf73; text-shadow: 0 0 7px rgba(71, 207, 115, 0.6); } .radio-checked_input:checked + .radio-checked_label--off { color: #ff3c41; text-shadow: 0 0 7px rgba(255, 60, 65, 0.6); } .radio-checked_input:checked + .radio-checked_label:before { display: none; } .radio-checked_label { cursor: pointer; display: inline-block; padding: 20px 25px 15px; line-height: 1; border-radius: 3rem; color: #acb2c0; transition: all 150ms ease-in-out; } .radio-checked_label:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; } .radio-checked_container { position: relative; } .radio-checked_highlight { position: absolute; left: 0; bottom: 0; width: var(--pagination-width); height: 100%; border-radius: 70px; box-shadow: inset -5px -5px 10px 4px #fff, inset -2px 6px 8px 6px #d0d8e3; background: #eef3f7; transition: all 0.6s ease; transform: translateX(var(--highlight-left)); } .svg { position: absolute; top: -50%; bottom: -50%; pointer-events: none; } .svg_icon { width: auto; height: 100%; } .svg--right { left: 100%; } .svg--left { right: 100%; }JS代码let root = document.documentElement; let color = ["#47cf73", "#7f71fe", "#1A3AF8", "#47cf73"]; var animateDur = "1.4s"; window.onload = function () { let activeChecked = document.querySelector( ".radio-checked_input:checked + .radio-checked_label" ); let left = ac…

css svg独角鲸
type: item
date: 2024-03-17T20:07:00+08:00
description: HTML代码 <g transform="translate(7.1125 -5.1801)"> <path d="m77.215 83.558c1.4405-0.60569 2.2867-2.2553 1.9155-3.7342-0.6446-2.5683-3.8498-3.4357-5.7338-1.5517-2.6146 2.6146 0.36421 6.7382 3.8183 5.2859zm-41.591 0.32282c1.2292-0.19662 2.5542-1.9723 2.5542-3.4231 0-1.6496-1.6219-3.1891-3.3422-3.1725-1.6666 0.01609-2.6435 0.72969-3.2054 2.3417-0.82222 2.3586 1.3535 4.6762 3.9935 4.254z" fill="#646565" stroke-width=".40736" /> <g transform="rotate(-7.7226 -43.169 -86.721)" stroke-width=".40736" id="wavyFin"> <g id="point"></g> <path d="m-32.219 158.99c17.782-3.4586 22.953-8.605 30.452-14.663 19.075-22.07 8.1615-11.969 1.0529-30.258-7.5572 5.1319-14.075 8.7611-19.344 14.504-6.1573 6.711-11.951 16.106-13.941 22.604-0.84424 2.7577-1.7072 7.596-1.3905 7.7963 0.12956 0.0819 1.5562 0.0895 3.1704 0.0168z" fill="#51c9cc" /> <path d="m9.0792 131.3c-11.266-7.8558-10.668-10.718-15.603-6.6943-5.7205 4.9496-13.655 10.976-17.506 32.372 14.324-3.115 25.071-12.809 33.109-25.677z" fill="#3cabab" /> </g> <g stroke-width=".40736"> <path d="m147.72 174.63c-15.966-22.909-58.78-43.53-95.861-47.218 0 0-4.2286 3.0102-23.261 9.8931-2.8252 9.8267-4.4778 17.924 1.5561 26.202 12.339 20.743 30.507 32.945 54.003 39.404 30.542 6.7475 60.809-3.6828 63.563-28.281z" fill="#ebe8e3" /> <path d="m121.8 209.15c18.64-1.9313 32.041-7.9477 42.807-19.217 13.687-14.328 17.776-30.369 18.819-58.773-2.1262-20.645-19.555 30.433-35.705 43.468l-1.714 1.4874c-12.247 10.628-28.319 16.037-47.63 16.03-15.341-6e-3 -31.019-3.0079-49.291-9.4393l-4.6847-1.6489 2.6572 2.5608c13.542 13.05 32.434 22.066 52.337 24.977 5.1151 0.74813 17.566 1.0567 22.405 0.55531z" fill="#d2d0cc" /> <path d="m27.225 157c-0.10138-3.132 1.0156-6.9296 3.0212-10.271 4.2148-7.0228 11.797-11.322 23.819-13.504 5.6029-1.017 16.997-1.0162 21.387 2e-3 3.4971 0.8108 9.4187 2.9425 9.7749 3.5188 0.11932 0.19308 0.66337 2.1109 1.209 4.2618 2.133 8.4085 6.9758 16.359 14.669 24.083 4.1929 4.2095 10.027 9.1187 10.852 9.1316 0.38255 6e-3 2.3118-7.1496 2.8545-10.588 0…

简易的时钟效果
type: item
date: 2024-03-17T16:47:25+08:00
description: {message type="success" content="演示图："/}HTML代码 1 2 3 4 5 6 7 8 9 10 11 12 CSS代码：body { background-color: #dfdad4; height: 100vh; display: flex; align-items: center; justify-content: center; } .clock { position: relative; border-radius: 100%; box-shadow: 2px 10px 10px 10px rgba(0, 0, 0, 0.3), inset 2px 20px 10px 10px rgba(0, 0, 0, 0.3); } .wrap { width: 250px; height: 250px; border-radius: 100%; } .ringbit { position: absolute; width: 150px; height: 350px; border: 20px solid transparent; border-radius: 90px; margin: auto; left: 0; bottom: 0; right: 0; top: 0; border-bottom: 20px solid white; } .ringbit:before { content: ""; position: absolute; width: 150px; height: 350px; border: 20px solid transparent; border-radius: 90px; margin: auto; left: -15%; bottom: 0; right: 0; top: 5%; border-bottom: 20px solid rgba(0, 0, 0, 0.2); filter: blur(5px); z-index: -1; } .ring { position: absolute; width: 100%; height: 100%; border: 20px solid black; border-radius: 100%; box-sizing: border-box; border-left: 20px solid white; border-right: 20px solid white; } .light { position: absolute; width: 50px; height: 30px; top: 0; border-radius: 100%; background-color: white; box-shadow: 0 0 10px 5px white; } .lightray { position: absolute; width: 200px; height: 200px; top: 5%; border-radius: 50px; background-image: linear-gradient(45deg, transparent, transparent, white); transform: rotate(-45deg); } .panel { position: absolute; height: 180px; width: 180px; background-color: black; margin: auto; left: 0; right: 0; top: 0; bottom: 0; border-radius: 100%; } .panel:after { content: "RAMESH"; position: absolute; top: 48px; left: 0; right: 0; bottom: 0; color: silver; font-size: 11px; text-align: center; } .string1, .string2, .string3 { position: absolute; width: 3px; height: 180px; border-top: 30px solid black; border-bottom: 30px solid black; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .string1 { transform: rotate(45deg); } .string2 { transform: rotate(135deg); } .string3 { transform…