网站变灰色 {x} 一行代码使你网站变灰色显示效果见本页代码 html { filter: grayscale(1); }

typecho相册单页模板 typecho相册单页模板typecho相册单页模板，单页模板非主题，可与主题共存！基于HTML5UP开发设计的静态单页，觉得好看，便整合到typecho里面，实现了动态管理。本项目仅需安装一个php文件，静态资源全球jsDelivr加速，使用方便简单。2.0版本引入了两个相册主题Multiverse和Lens，可自行选择。在线演示(前端官方样式参考，非本项目demo)：https://html5up.net/uploads/demos/lens/https://html5up.net/uploads/demos/multiverse/展示电脑端示例Multiverse风格Lens风格特性流畅的运行体验单页模板，可与主题共存后台编辑简单公共资源全球CDN加速支持缩略图云处理由HTML5UP设计前端两种可选样式版本更新2.0. 新增lens模板，更改整体目录结构1.2. 修复fontawesome图标加载错误的问题，新增部分自定义字段1.1. 重写数据读取接口，增加jsDelivr公共CDN，增加对象存储图片云处理1.0. 初次推送使用说明安装点击下载最新版本将photo-page-for-typecho文件夹内的.php文件上传至你所使用的主题根目录（可选两种模板），如默认主题路径/usr/themes/default，然后在typecho后台创建空白单页，根据你所上传的文件，将模板选择Multiverse风格照片集或Lens风格照片集。鉴于GoogleFont服务在国内完全正常使用，暂不使用第三方镜像加速。注：你无需下载master下的所有文件，静态文件均采用了jsDelivr公共CDN加速；强烈建议使用对象存储保存照片，以便程序自动调用图片云处理功能。调用格式标题,简介,图片链接多图以回车结束，每一行代表一张图片的信息。例如：picture1,2020年01月01日拍摄,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg picture2,2020年01月02日拍摄,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg picture3,2020年01月03日拍摄,https://ww2.sinaimg.cn/large/006uAlqKgy1fzlbjrxju2j31400u04qz.jpg自定义字段[可选] about：控制指定位置的文本，可自定义关于等信息；[可选] CDN：用以匹配你所使用的对象存储服务商，目前支持又拍云、阿里云OSS、七牛云、腾讯云，本字段目的在于使用云图像处理动态生成缩略图。对应填写内容为：UPYUN/OSS/KODO/COS；[可选] 社交链接字段 Twitter, Facebook, Instagram, GitHub，给相应字段填入链接即可。{lamp/}{message type="success" content="由于Github下载速度比较慢，我上传了蓝奏网盘"/}{cloud title="typecho相册单页模板" type="lz" url="https://koke.lanzoub.com/iRlmK09lh9re" password=""/}

JS鼠标点击特效 效果鼠标每点击网站页面一次，就会弹出一行文字，效果如下：代码实现{card-describe title=" "}打开footer.php，在/body前插入如下代码{/card-describe}<!--鼠标点击特效--> <script type="text/javascript"> jQuery(function () { $("html").click(function(e) { var a_idx = Math.floor((Math.random() * 30));/*鼠标点击随机出现一句话，代码数字请与添加的短句数量相一致*/ var a = new Array( "希望全世界停电 我可以偷偷跑去亲你", "我会爱你很久很久","我在贩卖日落 你像神明一样将阳光撒向我","陪伴本身就是这个世界上最了不起的安慰方式", "嘿，我是一朵云ლ(⁰⊖⁰ლ)", "❤" ,"陪你把岁月熬成清酒 陪你把孤夜熬成温柔","❤","月光下邂逅的是爱情和你","祝眉目舒展 顺问冬按","只想拥你入怀","这个世界乱糟糟的 而你干干净净","日月星辰之外 你是第四种难得","我会在每个有意义的时刻 远隔山海与你共存","山脚下遇见的你 我们山顶见","想试试在你迎面跑来一把抱住你的感觉","在生命里的旅程里 遇见你真好","如果不曾遇见 岂知生命如何","❤" ,"想和你一起走过下雪后的天","在我贫瘠的土地上你是最后的玫瑰","今晚月色很美呢","r=a(1-sinθ)","天青色等烟雨 而我在等你","你是我这一生等了半世未拆的礼物","你养我 我养你 两人爱情甜蜜蜜","人的一生会遇见两个人 一个惊艳了时光 一个温柔了岁月","你不用多好，我喜欢就好","愿有岁月可回首 且以深情共白头" );/*请在此添加句子*/ var color1 = Math.floor((Math.random() * 255)) var color2 = Math.floor((Math.random() * 255)); var color3 = Math.floor((Math.random() * 255)); var $i = $("<span />").text(a[a_idx]); var x = e.pageX, y = e.pageY; $i.css({ "z-index": 9999999999999 , "top": y - 20, "left": x, "position": "absolute", "font-family":"mmm", "fontSize":Math.floor((Math.random() * 5)+10),/*文字大小在10px到15px之间*/ "font-weight": "bold", "color": "rgb("+color1+","+color2+","+color3+")",/*随机颜色*/ "-webkit-user-select":"none", "-moz-user-select":"none", "-ms-user-select":"none", "user-select":"none", }); $("body").append($i); $i.animate({ "top": y - 200, "opacity": 0 }, 3000,/*句子悬浮时间*/ function() { $i.remove(); }); }); }); </script>

网站添加下雪特效 代码实现{card-describe title=" "}将下面代码插入到head.php或者footer.php中，在body内添加。{/card-describe}<script src="https://pt.pyrroleach.com/js/snowy.js"></script> <style type="text/css"> .snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;} </style> <div class="snow-container"></div>代码下载隐藏内容，请前往内页查看详情增加鼠标互动效果{card-describe title=" "}方法同样是在在前添加一段JavaScript代码，如下：{/card-describe}<canvas id="Snow"></canvas> <script> if(true){ (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; window.requestAnimationFrame = requestAnimationFrame; })(); (function() { var flakes = [], canvas = document.getElementById("Snow"), ctx = canvas.getContext("2d"), flakeCount = 200, mX = -100, mY = -100; canvas.width = window.innerWidth; canvas.height = window.innerHeight; function snow() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < flakeCount; i++) { var flake = flakes[i], x = mX, y = mY, minDist = 150, x2 = flake.x, y2 = flake.y; var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)), dx = x2 - x, dy = y2 - y; if (dist < minDist) { var force = minDist / (dist * dist), xcomp = (x - x2) / dist, ycomp = (y - y2) / dist, deltaV = force / 2; flake.velX -= deltaV * xcomp; flake.velY -= deltaV * ycomp; } else { flake.velX *= .98; if (flake.velY <= flake.speed) { flake.velY = flake.speed } flake.velX += Math.cos(flake.step += .05) * flake.stepSize; } ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; flake.y += flake.velY; flake.x += flake.velX; if (flake.y >= canvas.height || flake.y <= 0) { reset(flake); } if (flake.x >= canvas.width || flake.x <= 0) { reset(flake); } ctx.beginPath(); ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(snow); }; function reset(flake) { flake.x = Math.floor(Math.random() * canvas.width); flake.y = 0; flake.size = (Math.random() * 3) + 2; flake.speed = (Math.random() * 1) + 0.5; flake.velY = flake.speed; flake.velX = 0; flake.opacity = (Math.random() * 0.5) + 0.3; } function init() { for (var i = 0; i < flakeCount; i++) { var x = Math.floor(Math.random() * canvas.width), y = Math.floor(Math.random() * canvas.height), size = (Math.random() * 3) + 2, speed = (Math.random() * 1) + 0.5, opacity = (Math.random() * 0.5) + 0.3; flakes.push({ speed: speed, velY: speed, velX: 0, x: x, y: y, size: size, stepSize: (Math.random()) / 30 * 1, step: 0, angle: 180, opacity: opacity }); } snow(); }; document.addEventListener("mousemove", function(e) { mX = e.clientX, mY = e.clientY }); window.addEventListener("resize", function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); init(); })(); } </script> <style> #Snow{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(125,137,95,0.1); pointer-events: none; } </style>

网站实现樱花飘落效果 效果展示代码实现{card-describe title=" "}将js文件插入到到head.php或者footer.php中{/card-describe}<script src="/js/yinghua.js"></script>代码下载隐藏内容，请前往内页查看详情