✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
开发示例:NotionNext自定义鼠标特效
category
tags
type
status
slug
date
password
Last edited time
Jun 19, 2024 02:40 AM
summary
icon
这是一个开发示例,通过本文您将学会,如何用NotionNext中的快速插入自定义功能,比如自定义的鼠标特效。
按次教程,您的网页当鼠标点击后,指针点击处将浮现“社会主义核心价值观”的词条。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F823b98ef-1059-4786-bedd-3ba9f20174e6%2FUntitled.gif?table=block&id=56bf8d76-c574-4f43-94a3-afc98cf29a46&t=56bf8d76-c574-4f43-94a3-afc98cf29a46&width=342&cache=v2)
操作步骤
您需要分别修改项目中的两个文件 /public/js/custom.js 以及 /public/css/custom.css , 即可实现该点击特效。
1. 脚本
在您的仓库中找到 /public/js/custom.js , 这里可以填写你的自定义js脚本,在文件结尾添加以下内容
如图
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb54b40c8-0681-4042-8432-306fb5f3f4f0%2FUntitled.png?table=block&id=8bc29941-fa08-4329-afc7-f2d634475e82&t=8bc29941-fa08-4329-afc7-f2d634475e82&width=1425&cache=v2)
2. 动画样式
在 /public/css/custom.css 中添加如下样式
如图
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7d87cb81-e655-41b3-b8db-14fee86d194b%2FUntitled.png?table=block&id=693c3545-5690-4cb5-a7e3-e0b81ac838d6&t=693c3545-5690-4cb5-a7e3-e0b81ac838d6&width=935&cache=v2)
结束
修改以上两个文件后,项目重新部署,任务完成。
Loading...
Last update: 2023-08-14