diff --git a/packages/page-controller/src/mask/SimulatorMask.module.css b/packages/page-controller/src/mask/SimulatorMask.module.css
index 27ee8cb..fec892d 100644
--- a/packages/page-controller/src/mask/SimulatorMask.module.css
+++ b/packages/page-controller/src/mask/SimulatorMask.module.css
@@ -2,8 +2,7 @@
position: fixed;
inset: 0;
z-index: 2147483641; /* 确保在所有元素之上,除了 panel */
- /* pointer-events: none; */
- cursor: not-allowed;
+ cursor: wait;
overflow: hidden;
display: none;
diff --git a/packages/page-controller/src/mask/cursor-border.svg b/packages/page-controller/src/mask/cursor-border.svg
new file mode 100644
index 0000000..4297909
--- /dev/null
+++ b/packages/page-controller/src/mask/cursor-border.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/page-controller/src/mask/cursor-fill.svg b/packages/page-controller/src/mask/cursor-fill.svg
new file mode 100644
index 0000000..f089f5c
--- /dev/null
+++ b/packages/page-controller/src/mask/cursor-fill.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/page-controller/src/mask/cursor.module.css b/packages/page-controller/src/mask/cursor.module.css
index 5c30470..375b9c4 100644
--- a/packages/page-controller/src/mask/cursor.module.css
+++ b/packages/page-controller/src/mask/cursor.module.css
@@ -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);