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 {
.card-img-wrap {
transform-style: preserve-3d;
position: relative;
height: 100%;
width: 100%;
margin: auto auto;
top: 2%;
height: 96%;
width: 96%;
transform: translateZ(calc(var(--z) * 1px + 0.1px))
rotateY(calc(var(--ry) * 1deg));
.card-cover,
......@@ -40,6 +42,38 @@ section#mat {
// background-color: #0000005e;
// 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 }) => {
return (
<animated.div
className={classnames("mat-card", { highlight })}
className="mat-card"
style={
{
transform: to(
......@@ -139,7 +139,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
}}
>
<div className="card-shadow" />
<div className="card-img-wrap">
<div className={classnames("card-img-wrap", { highlight })}>
<img
className="card-cover"
onError={() => {
......@@ -149,6 +149,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
/>
<img className="card-back" src={getCardImgUrl(0, true)} />
</div>
<div className="card-streamer" />
</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