笒鬼鬼 - HTML源码
type: channel
link: http://blog.cenguigui.cn/category/html/
description: HTML源码
items: 音乐微信小程序-笒鬼鬼
items: HTML用canvas实现网页樱花
items: 音乐播放盒子
items: 音乐播放器样式更新说明
items: 给网站加个播放器-思幻版
items: 网易云播放器-仅供学习
items: CSS蝴蝶
items: Canvas下雨
items: 404模版
items: HTML切换按钮

音乐微信小程序-笒鬼鬼
type: item
date: 2025-12-20T17:00:16+08:00
description: 音乐微信小程序-笒鬼鬼演示更多就不展示了，代码开源，写得屎各位勿喷，后期逻辑也是靠ai的ui是自己手搓{cloud title="音乐小程序" type="lz" url="https://cenguigui.lanzouw.com/iAtp43e3zuvc" password="guigui"/}

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-04-17T19:36:29+08:00
description: 音乐播放器样式更新最近更新了音乐播放器的样式有：小粉猫，小橘猫，小丑牛，哆啦A梦最新更新的小粉猫和小橘猫，很多人借鉴去，同时也包括明空皓月音乐播放器，也新增两个样式导致现在我不太想更新，还有两个不是很好看的：小丑牛和哆啦A梦，我不太想更新看看那天想更新了就更新，也可能不更新样式图如下：就这些，虽然不是很有技术含量，但是也是一份花费时间的作品嘛，素材和抠图也是需要花费小小时间的先有样式：要是小丑牛和哆啦A梦加上就是十七个样式啦，但是我现在不想更新，其实也谈不上更新，就是觉得视乎更新了没啥用只是想大家扒去还是咋的，能否给俺留个小小的版权，虽然不是很大的劳动成果，但是花费时间了对吧~笒鬼鬼音乐播放器(十五个样式任你选择)要是大家想自己搭建的，可以看看我的文章 玫曦音乐播放器(笒鬼鬼二开版)虽然美化有点丑，但是能用啊，从原先的2个样式，加了第3样式，毕竟免费的嘛，还有接口是给大家用的免费接口，也就是不支持会员歌曲的接口，毕竟开源的能用就行嘛对吧~

给网站加个播放器-思幻版
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,…

Canvas下雨
type: item
date: 2024-03-17T20:28:40+08:00
description: JS代码：(function (window, document) { var Vector2 = (function () { function Vector2(x, y) { this.x = x || 0; this.y = y || 0; } return Vector2; })(); Vector2.prototype.add = function (addend) { this.x += addend.x; this.y += addend.y; }; var RainDrop = (function () { function RainDrop(parent) { this.size = 2; this.parent = parent; this.init(); } return RainDrop; })(); RainDrop.prototype.init = function () { this.life = 0; this.ttl = Math.random() * 500 + 300; this.position = new Vector2(Math.random() * window.innerWidth, 0); this.velocity = new Vector2( 0.5 - Math.random() * 1, Math.random() * 1 + 0.2 ); this.terminalVelocity = 8; }; RainDrop.prototype.update = function () { if ( this.position.x > window.innerWidth || this.position.x < -this.size || this.life > this.ttl ) this.init(); if (this.position.y > this.parent.floor) { this.position.y = this.parent.floor - this.size; this.velocity.y *= -0.2 - Math.random() * 0.2; } this.life++; this.position.add(this.velocity); this.velocity.y += 0.1; }; var Rain = (function () { function Rain(args) { this.props = args; this.rainDrops = []; this.init(); } return Rain; })(); Rain.prototype.init = function () { this.createCanvas(); this.resize(); this.loop(); }; Rain.prototype.resize = function () { var attr = "position: absolute; z-index: -99; top: 0; left: 0; height: 100vh; width: 100vw;"; this.canvas.setAttribute("style", attr); this.dimensions = { width: window.innerWidth, height: window.innerHeight }; this.canvas.width = this.dimensions.width; this.canvas.height = this.dimensions.height; this.floor = this.dimensions.height * 0.7; }; Rain.prototype.createCanvas = function () { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d"); document.body.appendChild(this.canvas); }; Rain.prototype.draw = function () { this.ctx.fillStyle = this.props.backgroundColor; this.ctx.fillRect(0, 0, this.dimensions.width, this.floor); for (var i = 0, len = this.rainDrops.length; i < len; i++) { var rainDrop = th…

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…