无味的啸啸-优快云博客

原创 vue3创建项目及pinia和vue-router的配置与安装

使用 Vite 创建 Vue 3 项目，可通过 npm create vite@latest 或 pnpm create vite 命令，并指定项目名称和模板（如 vue）。创建时可选择是否添加 TypeScript、路由、Pinia 等功能。项目创建后，进入项目目录，运行 pnpm install 或 npm install 安装依赖，然后通过 pnpm dev 或 npm run dev 启动开发服务器。如果创建时未添加路由或 Pinia，可手动安装。路由通过 pnpm add vue-router@

2025-02-21 20:59:36 793

原创使用HTML5 Canvas实现一个简单的时钟动画

如何使用HTML5 Canvas实现一个动态的时钟动画。通过Canvas的2D上下文，绘制了时钟的表盘、时针、分针、秒针和中心圆点，并利用JavaScript的Date对象获取当前时间，计算指针的角度。动画效果通过requestAnimationFrame实现，确保时钟能够实时更新。

2025-02-20 16:06:48 327

原创前端项目准备工作(常用工具安装)

如果你已经安装了node，那么你需要先卸载node（不然安装nvm可能会失败），如果你没有安装那直接跳过这一步到下一步。(或者你已经有nvm那就更不用了!(%NVM_HOME% 和 %NVM_SYMLINK% 理论上是nvm安装成功后自动生成的。选择nvm安装路径，和node.js的安装路径时,一般,安装好之后会自动配置完成,不过也有意外情况,pnpm 也是包管理工具,它对npm做了一点优化,nvm是node.js版本控制(管理工具),下面是安装和控制node.js的常用命令。这时候,我们就手动添加!

2025-01-08 11:25:01 971

原创单行文本省略

在 CSS 中，如果你想让单行文本超出一定宽度时自动省略并用省略号（...）表示，可以使用以下样式：解释：1. white-space: nowrap;：禁止文本换行，保持单行显示。2. overflow: hidden;：隐藏超出容器宽度的文本。3. text-overflow: ellipsis;：当文本超出容器宽度时，使用省略号（...）表示。4. width: 200px;：设置容器的宽度，可以根据实际需求调整。示例：假设你有一个 div 元素，里面包含一段文本，你可以这样应用样式

2024-11-17 11:28:25 191

原创 CSS 关键帧动画

使用@keyframes规则来定义动画的名称和关键帧。使用from和tofrom {to {不能直接混合使用百分比和fromto关键字可以省略0%和100%关键帧，但前提是你已经定义了其他百分比的关键帧。50% {常用到的点就这些,一些东西没有讲到请见谅!

2024-11-15 09:30:51 649

原创 CSS中的transform

如:transform: rotateX(-45deg) rotateZ(-45deg)transform这个属性非常强大，可以用来旋转、缩放、移动、倾斜等。当我们设置了 transform-style: preserve-3d。当然矩阵变换完全可以代替它,但是矩阵太过复杂了这里就不提了。后我们就可以对上述4中变换的z轴进行设置 (不然看不出效果)沿y轴平移100像素。沿x轴平移50像素。

2024-11-15 08:51:56 356

原创常用的CSS伪类选择器

nth-last-of-type()：从后往前数同类型兄弟元素中的第n个。:nth-last-child()：从后往前数元素的第n个子元素。:only-of-type：没有其他同类型兄弟元素的元素。:first-of-type：同类型兄弟元素中的第一个。:last-of-type：同类型兄弟元素中的最后一个。:nth-of-type()：同类型兄弟元素中的第n个。:only-child：没有其他兄弟元素的元素。:last-child：元素的最后一个子元素。:nth-child()：元素的第n个子元素。

2024-11-07 17:02:32 914