- 博客(22)
- 收藏
- 关注
RSS订阅原创 带后缀的域名，vue打包发布后打开页面空白，路由地址错误
然后找到创建路由的地方，在createWebHistory/createWebHashHistory里增加参数：import.meta.env.VITE_PUBLIC_PATH。如果域名格式为www.xxx.cn/base，且项目没有进行配置处理的话，线上访问会显示空白，无路由页面。打开vite.config.ts，在配置里添加如下代码，base根据实际情况修改。这样打包发布后就能自动拼接前缀，正常访问。
2024-10-18 16:52:05
196
原创 二次封装electron-vite，新增更新推送、最小化等功能
最近要做一个客户端项目，根据技术选型选择了electron，然后找到了一个封装好的框架。相关代码地址：src\renderer\src\App.vue。相关代码地址：src\main\update.ts。相关代码地址：src\main\tray.ts。系统通知及点击通知页面通信。手动检测更新且无新版本。最小化提示及托盘操作。
2024-10-08 17:36:53
367
原创 仿苹果官网底部动效导航按钮，动画核心使用css编写，已封装vue3组件版
苹果官网的动效挺多的，而且都很优雅，今天看到苹果底部的这个动效导航按钮感觉挺有意思，所以仿写了一个，做成了vue3的一个组件，源码地址看文末。先拆解一下动画：显示步骤为：放大显示出圆圈，收缩蓝色边框，显示加号按钮后展开，显示文字隐藏步骤为：先通过缩小隐藏加号按钮，隐藏文字，按钮由长变短为圆圈，然后缩小至消失
2024-09-05 17:12:04
474
原创 使用clip-path实现透明的流光边框卡片
最近看codepen，看到了这种带炫光的卡片效果，感觉很炫酷，实现原理也很简单，有两种实现方式：跑马灯效果：一个盒子，设置背景色，然后使用伪元素宽高比父元素大一点，然后设置渐变背景色，设置动画旋转角度流光效果：子盒子设置比父盒子小一点，能露出想要的边框边距就行，并设置背景色。然后给父盒子添加一两个伪元素，设置背景色，然后旋转伪元素本身。效果差不多就像下面这样↓流光效果
2024-09-04 17:49:44
292
原创 uniapp 踩坑记录：canvas生成海报并分享
最近做了一个生成二维码海报并拉起微信小程序分享的功能，因为要在多处使用，所以做成了一个组件，结果canvas怎么都无法绘制出来，在网上查询后得知，需要在创建示例时加上this。现在绘制问题解决了，可是使用canvasToTempFilePath导出为图片时又报错了，还是同样的问题，需要加上this。
2024-07-10 11:35:17
310
原创 uniapp写的h5页面怎么判断是否内嵌在小程序环境
最近有个需要，要把h5内嵌到他人小程序里，但是有个功能需要区分小程序和公众号来执行不同的操作，在网上搜到了解决办法，记录一下。安装weixin-js-sdk。
2024-07-05 11:48:26
309
原创 threejs学习之环境光和点光源
点光源，从一个点散发出的光，相当于灯泡，可以设置颜色，亮度、照射最大距离以及光照衰退量。环境光可以均匀照亮场景中所有物体，不能投射阴影，不能设置方向，只能设置颜色和亮度。添加地面，必须把receiveShadow设为true，地面才能接收物体投射出的阴影。创建立方体，必须把参数castShadow设置为true，立方体才能产生阴影。添加点光源，必须把castShadow设为true，光源才能投射阴影。// 镜面指数，越高反射效果越强。// 调整渲染器窗口大小。// 加载物体纹理贴图。
2024-05-04 18:11:07
870
原创 threejs学习之自定义几何体BufferGeometry
第二种方法是只编写出需要的坐标，不编写完整绘制点，顺序也可以打乱，通过索引，控制编写的坐标应该按照什么顺序进行绘制。这次学习了两个自定义几何体的方法，第一个通过编写完整的顶点坐标，绘制一个正方形。去掉重复的右上和坐下坐标点，然后编写索引，这样就会按照索引来取坐标点进行绘制。几何体是由坐标点绘制成线，线绘制成三角形，多个三角形拼接成的。
2024-05-04 15:27:35
214
2
原创 threejs学习之材质贴图和环境贴图
使几何体拥有场景反射效果，需要准备好场景6个面的图片，加载到几何体上。反射效果并不是真的让几何体反射场景环境，而是把场景环境贴图加载到几何体物体表面实现。使几何体拥有如皮革、砖块、塑料等材质效果，需要使用对应的材质图片，使用如下方式加载到几何体中。
2024-05-02 19:38:07
454
原创 css响应式属性：clamp()、min()、max()
clamp()接收三个参数，clamp(最小值、首选值、最大值)，如果在页面上，首选值大于最大值，则使用最大值，如果首选值小于最小值，则使用最小值，否则使用首选值。
2024-04-27 12:45:25
772
原创 前端聊天怎么实现艾特@功能？高亮@信息，仿微信、qq艾特功能
前端聊天怎么实现艾特@功能？高亮@信息，仿微信、qq艾特功能以上篇文章的代码为基准，继续扩展实现艾特@功能，没看过的可以点击链接查看前端实现输入框表情输入及发送，仿b站、qq小表情输入此demo使用vue3源码已上传：源码地址实现效果图声明：这只是个demo，不涉及与后端交互，不过会在该交互的地方标记，如需实际应用于项目，请根据实际情况进行改造完善！父组件主逻辑处理首先修改消息输入框，增加输入事件，用以判断显示输入框。且在上篇中发送消息采用了
2024-03-06 19:12:19
2295
11
原创 前端怎么实现聊天输入框？怎么实现类似b站评论的输入并发送自定义表情包？输入回显、发送时表情包转义为[emoji]字符串、页面展示回显
前端实现聊天输入框发送自定义emoji表情功能
2024-03-01 20:32:56
1580
原创 原生JS实现碰撞广告效果
一个可以从左上角开始，往右下角移动，碰到屏幕边界时会往相反方向移动广告效果代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0;
2021-07-20 18:51:54
188
原创 原生JS实现div方块拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background: red; p.
2021-07-18 13:24:55
414
原创 原生JS实现透明度轮播效果
js实现透明度轮播效果以透明度变换的方式切换轮播图，具有自动轮播、点击左右按钮切换、点击下方圆点切换功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="animation.js"></script> <style type="
2021-07-03 16:26:35
412
原创 原生JS实现水平轮播动画图
JS实现水平轮播动画图具有自动轮播、点击左右切换按钮切换图片、点击下方小圆点切换到对应图片功能由于图片大小限制，只截取了这一段gif完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * {
2021-07-03 16:20:59
304
原创 css实现3d旋转图片魔方
css实现3d旋转图片魔方代码部分：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title> <style type="text/css"> *{margin: 0;padding: 0;} ul li{list-style: none;} div{marg
2021-07-03 16:06:58
859
原创 原生JS实现弹幕功能
原生JS实现弹幕功能代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } #box {
2021-07-03 15:43:17
267
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人