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);