<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[zzpiop的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/zzpiop</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; zzpiop]]></copyright><item><title><![CDATA[HTML、CSS实现边框动画]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/162487772</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/162487772</guid><author>zzpiop</author><pubDate>Wed, 01 Jul 2026 14:28:07 +0800</pubDate><description><![CDATA[本文展示了四种CSS边框动画效果实现代码：1.旋转渐变边框使用伪元素和conic-gradient创建彩色旋转效果；2.流光边框通过线性渐变和mask实现流动光效；3.呼吸发光边框结合box-shadow和颜色变化创造脉动效果；4.四边绘制动画利用background分层实现边框分段绘制效果。所有效果都基于纯CSS实现，无需JavaScript，适用于卡片组件的美化展示。代码包含完整的HTML结构和CSS动画关键帧定义，可直接应用于Web项目。]]></description><category></category></item><item><title><![CDATA[HTML花里胡哨 水波纹切换图片]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/159432909</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/159432909</guid><author>zzpiop</author><pubDate>Tue, 24 Mar 2026 18:23:20 +0800</pubDate><description><![CDATA[本文介绍了一个水波纹焦点图切换效果，通过HTML5 Canvas实现图片切换时的动态水波纹动画。主要特点包括：1）点击任意位置触发水波纹扩散效果完成图片切换；2）支持导航点和箭头按钮控制；3）图片标题淡入淡出效果；4）响应式设计适配不同屏幕。代码结构清晰，包含图片数据配置、DOM元素获取、状态变量定义等功能模块，实现了一个视觉上吸引人的图片轮播效果。]]></description><category></category></item><item><title><![CDATA[用HTML做一个3D旋转相册]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/150556544</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/150556544</guid><author>zzpiop</author><pubDate>Wed, 20 Aug 2025 16:11:33 +0800</pubDate><description><![CDATA[本文展示了一个3D立方体图片展示效果，通过CSS 3D变换实现。代码包含完整的HTML结构和CSS样式，创建了一个可旋转的立方体，每个面显示不同的图片。主要特点包括：透视效果、3D变换保留、平滑过渡动画、响应式设计适配移动设备，以及鼠标交互效果。立方体六个面分别设置了不同的图片，通过CSS的transform属性实现3D旋转效果，并添加了白色发光边框增强视觉效果。代码还包含加载提示和移动设备适配的媒体查询。]]></description><category></category></item><item><title><![CDATA[cursor使用技巧202508]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/150210028</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/150210028</guid><author>zzpiop</author><pubDate>Mon, 11 Aug 2025 11:11:22 +0800</pubDate><description><![CDATA[使用小技巧]]></description><category></category></item><item><title><![CDATA[小游戏日记（2048游戏最终版）]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/149940959</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/149940959</guid><author>zzpiop</author><pubDate>Tue, 05 Aug 2025 16:44:00 +0800</pubDate><description><![CDATA[摘要：
2048游戏HTML版采用动态背景与炫酷视觉效果，包含完整的游戏规则和界面设计。玩家通过方向键移动数字方块，合并相同数字直至达到2048。代码实现包含游戏逻辑、动画效果和响应式布局，采用JavaScript编写核心功能，CSS实现霓虹灯标题、渐变色背景等现代UI元素。游戏界面显示当前分数和最佳记录，支持重新开始功能。背景采用视频层与CSS动画备用方案，确保视觉效果流畅。整体设计注重交互体验和视觉冲击力，是经典数字合并游戏的现代化实现。（148字）
]]></description><category></category></item><item><title><![CDATA[小游戏日记（2048游戏改进版）]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/149940923</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/149940923</guid><author>zzpiop</author><pubDate>Tue, 05 Aug 2025 16:42:41 +0800</pubDate><description><![CDATA[2048游戏是一款经典的滑动数字拼图游戏，玩家通过方向键移动方块，将相同数字的方块合并。游戏包含一个4x4网格，通过JavaScript实现游戏逻辑，HTML/CSS设计美观界面。主要功能包括：分数计算、自动游戏模式、速度调节、不同数字方块的颜色区分，以及游戏结束检测。界面采用渐变背景和圆角设计，支持响应式布局，提供&quot;重新开始&quot;和&quot;自动游戏&quot;按钮，并包含游戏规则说明。]]></description><category></category></item><item><title><![CDATA[小游戏日记（2048游戏初始版）]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/149940857</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/149940857</guid><author>zzpiop</author><pubDate>Tue, 05 Aug 2025 16:40:39 +0800</pubDate><description><![CDATA[《2048Test游戏介绍》 2048Test是一款经典的2048数字合并游戏，玩家通过方向键移动方块，将相同数字的方块合并，最终目标是创造出2048方块。游戏采用简洁美观的界面设计，包含计分系统和游戏结束提示。特点包括：基于HTML/CSS/JavaScript开发，响应式布局适配不同设备，彩色方块区分不同数字，提供重新开始功能，以及流畅的动画效果。游戏背景采用渐变色彩，方块颜色随数值变化而改变，视觉效果清晰直观。]]></description><category></category></item><item><title><![CDATA[小游戏日记(打地鼠)]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/149908814</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/149908814</guid><author>zzpiop</author><pubDate>Mon, 04 Aug 2025 16:19:12 +0800</pubDate><description><![CDATA[这是一个打地鼠游戏的HTML实现。游戏包含点击地鼠击打、暂停功能和难度选择功能。界面采用现代化UI设计，具有渐变背景、毛玻璃效果和响应式布局。游戏主区域包含地鼠洞和操作面板，侧边栏显示操作指南和历史记录。代码结构清晰，包含完整的样式表，采用Flex布局实现页面排版，并添加了动画效果和交互反馈。玩家可以通过简单的点击操作来开始游戏，选择不同难度挑战自己。]]></description><category></category></item><item><title><![CDATA[cursor Figma MCP的配置]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/148331680</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/148331680</guid><author>zzpiop</author><pubDate>Fri, 30 May 2025 09:52:00 +0800</pubDate><description><![CDATA[Figma MCP配置示例：在Windows系统中使用JSON格式配置Figma开发者MCP服务，包含启动命令、参数及API密钥。核心要素为cmd命令调用npx运行figma-developer-mcp工具，通过--figma-api-key参数授权，采用stdio通信模式。此配置适用于Framelink Figma MCP服务的快速部署]]></description><category></category></item><item><title><![CDATA[cursor重置脚本【亲测有效】]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/148143706</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/148143706</guid><author>zzpiop</author><pubDate>Thu, 22 May 2025 16:20:17 +0800</pubDate><description><![CDATA[Cursor采用机器码绑定机制，当单设备API调用次数超过阈值时会触发设备锁定，导致API服务不可用。为解决此问题，Windows系统用户可通过以下步骤重置设备识别码：首先，以管理员权限打开PowerShell；其次，执行特定的重置命令。操作前建议关闭Cursor客户端，并注意该脚本会修改系统注册表及设备指纹信息，执行后需重启系统以确保配置生效。由于涉及系统级修改，务必确保脚本来源可信。]]></description><category></category></item><item><title><![CDATA[Maven 新版setting.xml阿里云镜像配置]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/148060181</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/148060181</guid><author>zzpiop</author><pubDate>Mon, 19 May 2025 11:52:00 +0800</pubDate><description><![CDATA[在IntelliJ IDEA中使用Maven时，可能会遇到依赖下载失败或无法下载的问题。解决此问题的一种有效方法是更换Maven的镜像地址。可以通过修改Maven的settings.xml配置文件来实现。具体步骤如下： 打开Maven的settings.xml文件，通常位于${user.home}/.m2/目录下。 在&lt;mirrors&gt;标签中添加或修改镜像地址，例如使用阿里云的Maven镜像： aliyunmaven central https://maven.aliyun.com/reposi]]></description><category></category></item><item><title><![CDATA[Mysql 随笔记录 查询表中某个字段的值出现两次或者多次相同值的数据列]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/143617135</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/143617135</guid><author>zzpiop</author><pubDate>Fri, 08 Nov 2024 10:54:30 +0800</pubDate><description><![CDATA[【代码】Mysql 随笔记录 查询表中某个字段的值出现两次或者多次相同值的数据列。]]></description><category></category></item><item><title><![CDATA[vue3+ts+vite v-for里面使用echarts无法显示的解决方案]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/142999378</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/142999378</guid><author>zzpiop</author><pubDate>Thu, 17 Oct 2024 10:40:43 +0800</pubDate><description><![CDATA[一、问题描述
1.问题描述：在vue3+ts+vite环境中，我想要v-for渲染一个班级里面的每一个学生的图表情况描述，但是图表无法显示出来，如图示例：
二、解决方案
1.成功解决的效果图

我的解决方案是把echarts封装到组件里面，并且在v-for里面使用组件即可。
安装依赖
npm install echarts

创建一个自定义组件MyChart.vue
&lt;template&gt;
  &lt;div ref="chartRef" :data="data"  :style="{width:]]></description><category></category></item><item><title><![CDATA[2024年Java填坑之路之nginx篇bug]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/140063357</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/140063357</guid><author>zzpiop</author><pubDate>Sat, 29 Jun 2024 14:36:53 +0800</pubDate><description><![CDATA[nginx代理的域名和IP的小问题，记录一下情况]]></description><category></category></item><item><title><![CDATA[2024年Java+Jfinal+H5接入微信支付所遇到的问题]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/139543317</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/139543317</guid><author>zzpiop</author><pubDate>Thu, 20 Jun 2024 10:29:19 +0800</pubDate><description><![CDATA[H5接入微信Jsapi支付时踩的一些坑，在这里记录一下，希望能对你有所帮助]]></description><category></category></item><item><title><![CDATA[Java bug日记No.2]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/126787381</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/126787381</guid><author>zzpiop</author><pubDate>Fri, 09 Sep 2022 18:01:29 +0800</pubDate><description><![CDATA[空指针的一个错误情况的描述]]></description><category></category></item><item><title><![CDATA[Java bug日记No.1]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/126742939</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/126742939</guid><author>zzpiop</author><pubDate>Wed, 07 Sep 2022 12:11:02 +0800</pubDate><description><![CDATA[日志bug之无头绪bug之一的mybatis报错]]></description><category></category></item><item><title><![CDATA[Java mybatis+Spring封装分页]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/114988437</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/114988437</guid><author>zzpiop</author><pubDate>Thu, 18 Mar 2021 19:32:30 +0800</pubDate><description><![CDATA[这是一篇好文章
下面展示就是了。
package entity;

import java.io.Serializable;
import java.util.List;

public class Page &lt;T&gt; implements Serializable{

	// 页数（第几页）
	private long currentpage;

	// 查询数据库里面对应的数据有多少条
	private long total;// 从数据库查处的总记录数

	// 每页查5条
	private]]></description><category></category></item><item><title><![CDATA[Oracle的安装过程]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/104254517</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/104254517</guid><author>zzpiop</author><pubDate>Mon, 10 Feb 2020 21:10:16 +0800</pubDate><description><![CDATA[1.第一步
修改文件cvu_prereq，使之能够通过Oracle的环境检查
文件位置：Database\stage\cvu
文件名称：cvu_prereq.xml
打开文件添加

按照以下步骤安装：



















安装完成！

...]]></description><category></category></item><item><title><![CDATA[RabbitMQ的介绍]]></title><link>https://blog.youkuaiyun.com/zzpiop/article/details/104251758</link><guid>https://blog.youkuaiyun.com/zzpiop/article/details/104251758</guid><author>zzpiop</author><pubDate>Mon, 10 Feb 2020 18:08:15 +0800</pubDate><description><![CDATA[1.什么是RabbitMQ
RabbitMQ是支持持久化消息队列的消息中间件。MQ是消费-生产者模型的一个典型的代表，一端往
消息队列中不断写入消息，而另一端则可以读取或者订阅队列中的消息。而MQ则是遵循了AMQP协议
的具体实现和产品。
2.RabbitMQ的安装
安装RabbitMQ之前需要先安装Erlang。
然后配置Relang的环境变量

然后把%ERLANG_HOME%\bin添加进p...]]></description><category></category></item></channel></rss>