纯CSS实现一个粒子动效的按钮 前言button（按钮）是一种用于在网页上创建交互式元素的HTML元素也被用于创建交互式表单，比如提交表单或重置表单。按钮的type属性可以设置为"submit"或"reset"，分别表示提交表单或重置表单。此外，按钮元素也可以包含图像或文本内容，以便更好地描述按钮的功能，按钮（button）元素具有许多功能和灵活性，但在使用时应该遵循良好的Web开发实践，以确保按钮的功能和外观在不同浏览器和设备上都能得到良好的呈现和响应 实现步骤html部分<button class="button">安辰博客</button>css部分定义一个按钮元素的样式。该按钮具有粉色背景色 (#ff0081)，在顶部和底部分别有1em的填充，在左右两侧有2em的填充，白色文本颜色，4px的border-radius，无边框，以及当鼠标悬停时改变指针样式表示可点击。按钮还具有box-shadow效果，在悬停到按钮上时，使用transition属性使按钮的背景色和box-shadow平滑地过渡。 .button { display: inline-block; padding: 1em 2em; background-color: #ff0081; color: #fff; border-radius: 4px; border: none; cursor: pointer; position: relative; box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5); outline: 0; transition: transform ease-in 0.1s, background-color ease-in 0.1s, box-shadow ease-in 0.25s; }复制定义 ::before 伪元素，其使用radial-gradient创建背景色为多个同色和透明度的圆的渐变动画效果，并使用动画效果使气泡变大并在动画结束时淡出。.button::before{ position: absolute; content: ''; left: -2em; right: -2em; top: -2em; bottom: -2em; pointer-events: none; transition: ease-in-out .5s; background-repeat: no-repeat; background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%); background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%; background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 64% 70%, 80% 71%; animation: bubbles ease-in-out .75s forwards; }复制定义一个名为bubbles的关键帧动画，用于在button元素被active激活时调用。在动画中，通过background-position属性和多个参数设置不同位置的背景颜色，来创造一种气泡飘浮的效果。这些气泡颜色是由外围向内逐渐变深的渐变，并伴随着平移和缩放。当点击按钮时，会使.button元素的背景色变成粉色，并附加一个阴影效果。同时，::before伪元素的动画将停止并将背景大小设置为0。.button:active { transform: scale(0.95); background-color: #f3037c; box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5); } .button:active::before { animation: none; background-size: 0; } @keyframes bubbles { 0% { background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 64% 70%, 80% 71%; } 50% { background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%, 75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%, 68% 96%, 95% 100%; } 100% { background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%, 100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%, 100% 100%; background-size: 0% 0%; } }

node.js无法链接数据库解决办法 前言前几天在GitHub里面下了一个小程序但是当我链接数据库的时候出现了问题 最后也是找到了解决办法，没有多说的直接上教程。开始当node.js链接数据库的时候访问地址出现下面这段话翻译的中文意思就是：客户端不支持服务器请求认证协议；考虑升级MySQL客户端Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client解决办法也非常简单：在MySQL命令行里面输入下面这穿代码吧anchen改成你的数据库密码就可以了ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'anchen';然后再去重新链接数据库你就会发现恢复正常了

不小心提交到Git远程仓库的文件，怎么完全从仓库中清除? 使用 Git 做代码版本控制时，有时候会不小心把某些敏感的文件提交到 Git 仓库，可能过后很久才发现。或者是以前提交的文件，现在发现不合适，需要从仓库中清理。 如果但是删除文件，然后提交的话，还是可以从仓库的历史记录中找出这个文件，这个问题就比较严重了。所以，如果要彻底从 Git 仓库中删除某个文件可以用如下操作：git filter-branch --index-filter 'git rm -rf --cached --ignore-unmatch path_to_file' HEAD其中 path_to_file 就是你要删除的文件在项目中的相对路径，例如：src/main/resource/application.yml 执行此命令后，git 会遍历整个仓库的历史记录找出这个文件，清理，然后重新构造 git 的历史链条。接下来强推就行了 git push -f 这样远程仓库上也不会再存在这个文件了。

Nodejs一个简单的提交页面 创建一个文件夹进入中的输入以下指令npm init -ynpm install expressnpm install express-generator -gexpress -e anchen（anchen自己命名的文件夹）就会得到你命名的文件夹这边以anchen命名我就会得到一个anchen的文件夹复制路径（你也可以用终端使用指令进入这个文件夹 ）打开vscode>文件>打开文件夹>粘贴你刚刚复制的路径进行下面的命名npm inpm start修改views下面的index.ejs 如下图修改routes文件夹的index.js如下图浏览器输入localhost:3000就可以了（每修改一次就需要终止再重新打开在终端按两次Ctrl+c再按一次方向↑键）运行效果

justify-content属性 justify-contentjustify-content属性用于设置弹性容器中子元素在主轴上的对齐方式。主轴是指弹性容器的方向，可以是水平方向（row）或垂直方向（column）。justify-content:flex-start /*左对齐*/ justify-content:flex-end /*右对齐*/ justify-content:center /*居中*/ justify-content:space-between /*两端对齐，项目之间的间隔是相等的*/ justify-content:space-around /*每个项目两侧的间隔相等*/ justify-content:initial /*将此属性设置为属性的默认值*/ justify-content:inherit /*从父元素继承属性的值*/ justify-content:space-evenly; /*弹性间隔相等布局*/使用示例.anchen { display: flex; justify-content: center; }

PHP实现SSH远程连接服务器并操作服务器 前言如何使用php执行本地命令这个肯定大部分会php的朋友都知道，比如：exec函数、shell_exec函数等，但是如果我想执行远程服务器的命令呢？代码class CustomSsh{ protected $host; protected $port = 22; protected $password; protected $publicKey; protected $privateKey; protected $session; protected $username; public function __construct(array $config,$connect_type='password'){ $this->host = $config['host']; $this->port = $config['port']??22; $this->password = $config['password']??''; $this->publicKey = $config['publicKey'] ?? ''; $this->privateKey = $config['privateKey'] ?? ''; $this->username = $config['username'] ?? ''; $this->session = ssh2_connect($this->host, $this->port); if($connect_type == 'password'){ ssh2_auth_password($this->session, $this->username, $this->password); }else{ ssh2_auth_pubkey_file($this->session,$this->username,$this->publicKey,$this->privateKey); } } public function execute($cmd){ if($cmd == ""){ return false; } $stream = ssh2_exec($this->session, $cmd); stream_set_blocking($stream, true); $content = stream_get_contents($stream); return trim($content); } //接收文件 public function recvFile($remote_file,$local_file){ return ssh2_scp_recv($this->session, $remote_file, $local_file); } //发送文件 public function sendFile($local_file,$remote_file){ return ssh2_scp_send($this->session, $local_file, $remote_file); } public function __destruct(){ ssh2_disconnect($this->session); } } $config = [ 'host' => '', 'port' => '', 'publicKey' => "", 'privateKey' => "", 'username' => "" ]; $customSsh = new CustomSsh($config,'publicKey'); echo $customSsh->execute("cd /data/web/ && ls -la"); $customSsh->recvFile("/a.txt","/a.txt");

CDN缓存规则推荐 CDN缓存的介绍CDN（Content Delivery Network）缓存是一种通过在多个地理位置分布的服务器上存储站点内容的技术，以提高站点访问速度和性能。这些服务器被称为边缘服务器，它们在全球范围内分布，并且能够提供快速的静态资源和动态内容的访问大多数人用的缓存规则先加不缓存URL扩展名： gz xml php jsp asp aspxURL完整路径： /admin（填你网站后台的后缀） 首页：不缓存 gz xml php这个里面 .php是我们网页的文件类型，防止更新文章后打开网站看不到新发表的文章。 .xml是站点地图的文件，不缓存是为了防止站点地图更新后搜索引擎抓取不到新更新的URL文件。 .gz也是站点地图的文件，不同插件后缀不同，有的是xml有的是gz，这个可以选择。 然后首页不缓存是为了有些主题在pajx下首页有些函数失效，比如登陆后台。加缓存URL扩展名：woff2 otf ot svg ttf woff jpggif png bmp ico jpeg mp3mp4 flv webp swf css js（部分cdn网站添加规则需要前面加上.才能添加比如.js）.css;.js是网页中各种样式的文件类型，这个占比最大。所以缓存时间要高一些。（可以设置个1天或者更久 如果经常更新js css建议不要太久）woff2 otf ot svg ttf woff则是各类字体文件，我们将其缓存下来可以提高很多速度。jpg gif png bmp ico则是各类图片文件