refactor(ui): move ui and i18n to new package
This commit is contained in:
Simon
64
packages/ui/src/motion-css/createMotion.ts
Normal file
64
packages/ui/src/motion-css/createMotion.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import styles from './motion.module.css'
|
||||
|
||||
export function createMotion() {
|
||||
const wrapper = document.createElement('div')
|
||||
wrapper.className = styles.wrapper
|
||||
|
||||
{
|
||||
const colorWrapper = document.createElement('div')
|
||||
colorWrapper.className = styles.colorWrapper
|
||||
wrapper.appendChild(colorWrapper)
|
||||
|
||||
const layerA = document.createElement('div')
|
||||
layerA.className = styles.colorLayer + ' ' + styles.layerA
|
||||
colorWrapper.appendChild(layerA)
|
||||
|
||||
const layerB = document.createElement('div')
|
||||
layerB.className = styles.colorLayer + ' ' + styles.layerB
|
||||
colorWrapper.appendChild(layerB)
|
||||
|
||||
const layerC = document.createElement('div')
|
||||
layerC.className = styles.colorLayer + ' ' + styles.layerC
|
||||
colorWrapper.appendChild(layerC)
|
||||
}
|
||||
|
||||
{
|
||||
const borderWrapper = document.createElement('div')
|
||||
borderWrapper.className = styles.borderWrapper
|
||||
wrapper.appendChild(borderWrapper)
|
||||
|
||||
const layerA = document.createElement('div')
|
||||
layerA.className = styles.borderLayer + ' ' + styles.layerA
|
||||
borderWrapper.appendChild(layerA)
|
||||
|
||||
const layerB = document.createElement('div')
|
||||
layerB.className = styles.borderLayer + ' ' + styles.layerB
|
||||
borderWrapper.appendChild(layerB)
|
||||
|
||||
const layerC = document.createElement('div')
|
||||
layerC.className = styles.borderLayer + ' ' + styles.layerC
|
||||
borderWrapper.appendChild(layerC)
|
||||
}
|
||||
|
||||
function show() {
|
||||
wrapper.classList.remove(styles.exit)
|
||||
wrapper.classList.remove(styles.entry)
|
||||
// Force reflow to restart animation
|
||||
void wrapper.offsetHeight
|
||||
wrapper.classList.add(styles.entry)
|
||||
}
|
||||
|
||||
function hide() {
|
||||
wrapper.classList.remove(styles.entry)
|
||||
wrapper.classList.remove(styles.exit)
|
||||
// Force reflow to restart animation
|
||||
void wrapper.offsetHeight
|
||||
wrapper.classList.add(styles.exit)
|
||||
}
|
||||
|
||||
return {
|
||||
element: wrapper,
|
||||
show,
|
||||
hide,
|
||||
}
|
||||
}
|
||||
397
packages/ui/src/motion-css/motion.module.css
Normal file
397
packages/ui/src/motion-css/motion.module.css
Normal file
@@ -0,0 +1,397 @@
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
|
||||
transform-origin: center;
|
||||
|
||||
--color-1: rgb(57, 182, 255);
|
||||
--color-2: rgb(189, 69, 251);
|
||||
--color-3: rgb(255, 87, 51);
|
||||
--color-4: rgb(255, 214, 0);
|
||||
|
||||
--blend-mode: screen;
|
||||
}
|
||||
|
||||
.colorLayer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
/* 变亮混合模式 */
|
||||
/* mix-blend-mode: screen; */
|
||||
/* mix-blend-mode: overlay; */
|
||||
/* mix-blend-mode: multiply; */
|
||||
mix-blend-mode: add;
|
||||
|
||||
/* 边框遮罩 - 中间透明，边缘不透明 */
|
||||
mask-image: url(https://img.alicdn.com/imgextra/i2/O1CN01iW1wfX1C0ICvoPbTq_!!6000000000018-2-tps-512-512.png);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: calc(100% + 10px) calc(100% + 10px);
|
||||
}
|
||||
|
||||
.borderWrapper {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
/* filter: blur(10px); */
|
||||
}
|
||||
|
||||
.borderLayer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
/* 变亮混合模式 */
|
||||
/* mix-blend-mode: overlay; */
|
||||
mix-blend-mode: add;
|
||||
|
||||
mask-image:
|
||||
linear-gradient(
|
||||
to right,
|
||||
black 0px,
|
||||
black 2px,
|
||||
transparent 2px,
|
||||
transparent calc(100% - 2px),
|
||||
black calc(100% - 2px),
|
||||
black 100%
|
||||
),
|
||||
linear-gradient(
|
||||
to top,
|
||||
black 0px,
|
||||
black 2px,
|
||||
transparent 2px,
|
||||
transparent calc(100% - 2px),
|
||||
black calc(100% - 2px),
|
||||
black 100%
|
||||
);
|
||||
|
||||
mask-composite: add;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100% 100%;
|
||||
|
||||
/* filter: blur(100px); */
|
||||
}
|
||||
|
||||
.blueLayer {
|
||||
&.colorLayer {
|
||||
mask-position: left -5px top -5px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
/* inset: 0; */
|
||||
width: calc(max(100vw, 100vh) * 1.5);
|
||||
height: 600px;
|
||||
top: calc(50% - 300px);
|
||||
left: 50%;
|
||||
filter: blur(100px);
|
||||
background: rgb(57, 182, 255);
|
||||
animation: rotate-clockwise 4s linear infinite;
|
||||
animation-delay: -3s;
|
||||
}
|
||||
}
|
||||
|
||||
.purpleLayer {
|
||||
&.colorLayer {
|
||||
mask-position: left -3px top -7px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
/* inset: 0; */
|
||||
width: calc(max(100vw, 100vh) * 1.5);
|
||||
height: 600px;
|
||||
top: calc(50% - 300px);
|
||||
left: 50%;
|
||||
filter: blur(100px);
|
||||
background: rgb(189, 69, 251);
|
||||
animation: rotate-clockwise 4s linear infinite;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
}
|
||||
|
||||
.orangeLayer {
|
||||
/* opacity: 0.5; */
|
||||
|
||||
&.colorLayer {
|
||||
mask-position: left -7px top -2px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
/* inset: 0; */
|
||||
width: calc(max(100vw, 100vh) * 1.5);
|
||||
height: 600px;
|
||||
top: calc(50% - 300px);
|
||||
left: 50%;
|
||||
filter: blur(100px);
|
||||
background: rgb(255, 87, 51);
|
||||
animation: rotate-counter-clockwise 3s linear infinite;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
}
|
||||
|
||||
.yellowLayer {
|
||||
/* opacity: 0.5; */
|
||||
|
||||
&.colorLayer {
|
||||
mask-position: left -6px top -4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
/* inset: 0; */
|
||||
width: calc(max(100vw, 100vh) * 1.5);
|
||||
height: 600px;
|
||||
top: calc(50% - 300px);
|
||||
left: 50%;
|
||||
filter: blur(100px);
|
||||
background: rgb(255, 214, 0);
|
||||
animation: rotate-counter-clockwise 4s linear infinite;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
}
|
||||
|
||||
/* 旋转动画 */
|
||||
@keyframes rotate-clockwise {
|
||||
0% {
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-counter-clockwise {
|
||||
0% {
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%) rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wrapper-entry {
|
||||
from {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
rgb(57, 182, 255)
|
||||
rgb(189, 69, 251)
|
||||
rgb(255, 87, 51)
|
||||
rgb(255, 214, 0)
|
||||
*/
|
||||
|
||||
@keyframes mask-running {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mask-running-reverse {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.colorWrapper {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
.colorLayer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
mix-blend-mode: var(--blend-mode);
|
||||
|
||||
/* 边框遮罩 - 中间透明，边缘不透明 */
|
||||
mask-image: url(https://img.alicdn.com/imgextra/i2/O1CN01iW1wfX1C0ICvoPbTq_!!6000000000018-2-tps-512-512.png);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.borderWrapper {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
--blend-mode: lighten;
|
||||
|
||||
.borderLayer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
mix-blend-mode: var(--blend-mode);
|
||||
|
||||
mask-border: url(https://img.alicdn.com/imgextra/i3/O1CN01bFjRug1yssyWEUbKL_!!6000000006635-2-tps-256-256.png)
|
||||
25;
|
||||
-webkit-mask-box-image: url(https://img.alicdn.com/imgextra/i3/O1CN01bFjRug1yssyWEUbKL_!!6000000006635-2-tps-256-256.png)
|
||||
25;
|
||||
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100% 100%;
|
||||
|
||||
background-color: var(--color-2);
|
||||
}
|
||||
}
|
||||
|
||||
.entry .colorWrapper,
|
||||
.entry .borderWrapper {
|
||||
animation: wrapper-entry 0.8s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.exit .colorWrapper,
|
||||
.exit .borderWrapper {
|
||||
animation: wrapper-entry 0.8s ease-in-out reverse forwards;
|
||||
}
|
||||
|
||||
.layerA {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
&::before {
|
||||
mix-blend-mode: var(--blend-mode);
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: -100%;
|
||||
top: 0;
|
||||
background-image: linear-gradient(
|
||||
to right bottom,
|
||||
transparent,
|
||||
var(--color-1),
|
||||
transparent,
|
||||
var(--color-1),
|
||||
transparent
|
||||
);
|
||||
animation: mask-running 2s linear infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
mix-blend-mode: var(--blend-mode);
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-image: linear-gradient(
|
||||
to right bottom,
|
||||
transparent,
|
||||
var(--color-1),
|
||||
transparent,
|
||||
var(--color-1),
|
||||
transparent
|
||||
);
|
||||
animation: mask-running 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.layerB {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
&::before {
|
||||
mix-blend-mode: var(--blend-mode);
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: -100%;
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
to right top,
|
||||
transparent,
|
||||
var(--color-2),
|
||||
transparent,
|
||||
var(--color-2),
|
||||
transparent
|
||||
);
|
||||
animation: mask-running-reverse 3s linear infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
mix-blend-mode: var(--blend-mode);
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
to right top,
|
||||
transparent,
|
||||
var(--color-2),
|
||||
transparent,
|
||||
var(--color-2),
|
||||
transparent
|
||||
);
|
||||
animation: mask-running-reverse 3s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.layerC {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
opacity: 0.5;
|
||||
|
||||
&::before {
|
||||
mix-blend-mode: var(--blend-mode);
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: -100%;
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
to right top,
|
||||
transparent,
|
||||
var(--color-3),
|
||||
transparent,
|
||||
var(--color-3),
|
||||
transparent
|
||||
);
|
||||
animation: mask-running 1s linear infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
mix-blend-mode: var(--blend-mode);
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
to right top,
|
||||
transparent,
|
||||
var(--color-3),
|
||||
transparent,
|
||||
var(--color-3),
|
||||
transparent
|
||||
);
|
||||
animation: mask-running 1s linear infinite;
|
||||
}
|
||||
}
|
||||
5
packages/ui/src/motion-css/readme
Normal file
5
packages/ui/src/motion-css/readme
Normal file
@@ -0,0 +1,5 @@
|
||||
This is the CSS implementation of ai-motion.
|
||||
|
||||
Easy to use but Terrible performance. Causing full screen glitching in some browsers.
|
||||
|
||||
Use it only in a small area.
|
||||
Reference in New Issue
Block a user