mortal/page-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(PageController): use local svg for cursor mask to fix CSP errors

Browse Source
This commit is contained in:
Simon
2026-01-28 17:04:54 +08:00
parent d712ea7041
commit 142231a16c
4 changed files with 38 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/page-controller/src/mask/cursor.module.css
+29 -50
View File
@@ -5,80 +5,59 @@
height: var(--cursor-size, 75px);
pointer-events: none;
z-index: 10000;
transform: translate(-30%, -30%);
animation: cursor-enter 300ms ease-out forwards;
}
.cursorBorder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgb(57, 182, 255), rgb(189, 69, 251));
mask-image: url(https://img.alicdn.com/imgextra/i1/O1CN01YHLVYR1LvqWIyo5kH_!!6000000001362-2-tps-202-202.png);
mask-image: url(./cursor-border.svg);
mask-size: 100% 100%;
mask-repeat: no-repeat;
animation: cursor-breathe 2s ease-in-out infinite;
transform-origin: center;
transform: rotate(-135deg) scale(1.2);
margin-left: -10px;
margin-top: -18px;
}
.cursorFilling {
position: absolute;
inset: 0;
background: url(https://img.alicdn.com/imgextra/i3/O1CN01JZOqOS1Tu1sIKbPLW_!!6000000002441-2-tps-202-202.png);
width: 100%;
height: 100%;
background: url(./cursor-fill.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
transform-origin: center;
transform: rotate(-135deg) scale(1.2);
margin-left: -10px;
margin-top: -18px;
}
.cursorRipple {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
margin-left: -50%;
margin-top: -50%;
&::after {
content: '';
opacity: 0;
position: absolute;
inset: 0;
border: 4px solid rgba(57, 182, 255, 1);
border-radius: 50%;
}
}
.cursor.clicking .cursorRipple::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: -30%;
top: -30%;
border: 4px solid rgba(57, 182, 255, 1);
border-radius: 50%;
animation: cursor-ripple 300ms ease-out forwards;
}
/* 光标动画关键帧 */
@keyframes cursor-breathe {
0%,
100% {
transform: scale(1);
opacity: 0.9;
}
50% {
transform: scale(1.05);
opacity: 1;
}
}
@keyframes cursor-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes cursor-enter {
0% {
transform: translate(-30%, -30%) scale(0.5);
opacity: 0;
}
100% {
transform: translate(-30%, -30%) scale(1);
opacity: 1;
}
}
@keyframes cursor-ripple {
0% {
transform: scale(0);