398 lines
6.8 KiB
CSS
398 lines
6.8 KiB
CSS
.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;
|
|
}
|
|
}
|