Commit 070bf272 authored by Chunchi Che's avatar Chunchi Che

add streamer effect

parent 5bd0f57f
Pipeline #22291 passed with stages
in 13 minutes and 4 seconds
...@@ -10,8 +10,10 @@ section#mat { ...@@ -10,8 +10,10 @@ section#mat {
.card-img-wrap { .card-img-wrap {
transform-style: preserve-3d; transform-style: preserve-3d;
position: relative; position: relative;
height: 100%; margin: auto auto;
width: 100%; top: 2%;
height: 96%;
width: 96%;
transform: translateZ(calc(var(--z) * 1px + 0.1px)) transform: translateZ(calc(var(--z) * 1px + 0.1px))
rotateY(calc(var(--ry) * 1deg)); rotateY(calc(var(--ry) * 1deg));
.card-cover, .card-cover,
...@@ -40,6 +42,38 @@ section#mat { ...@@ -40,6 +42,38 @@ section#mat {
// background-color: #0000005e; // background-color: #0000005e;
// filter: blur(2px); // filter: blur(2px);
} }
// ref: https://github.com/Mr-majifu/Animated-Profile-Card02/blob/master/style.css
.card-streamer {
position: absolute;
inset: 0;
background: #000;
overflow: hidden;
}
.card-streamer::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 400%;
height: 80%;
background: linear-gradient(transparent, #45f3ff,#45f3ff,#45f3ff,transparent);
animation: stream 2s linear infinite;
}
.card-streamer::after {
content: '';
position: absolute;
/* https://developer.mozilla.org/en-US/docs/Web/CSS/inset */
inset: 3px;
background: #292929;
}
@keyframes stream {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
} }
} }
......
...@@ -116,7 +116,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => { ...@@ -116,7 +116,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
return ( return (
<animated.div <animated.div
className={classnames("mat-card", { highlight })} className="mat-card"
style={ style={
{ {
transform: to( transform: to(
...@@ -139,7 +139,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => { ...@@ -139,7 +139,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
}} }}
> >
<div className="card-shadow" /> <div className="card-shadow" />
<div className="card-img-wrap"> <div className={classnames("card-img-wrap", { highlight })}>
<img <img
className="card-cover" className="card-cover"
onError={() => { onError={() => {
...@@ -149,6 +149,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => { ...@@ -149,6 +149,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
/> />
<img className="card-back" src={getCardImgUrl(0, true)} /> <img className="card-back" src={getCardImgUrl(0, true)} />
</div> </div>
<div className="card-streamer" />
</animated.div> </animated.div>
); );
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment