开局一张图，动效全靠猜：
收到的需求是让 3 个画幅都动起来，同时要着力凸显 SSS 级特效。好吧，于是乎首先想到先加个入场效果，让画幅从荷塘中显现的感觉：
1
2
3
4
5
6
7
8
9
10
11
12
13
| animation: floating-enter 1s ease-in-out 1;
@keyframes floating-enter {
0% {
transform: translateY(40%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
|
光只是入场又显得有点呆板，故再加个自然的轻微浮动，然后顺带复习了下 animation是支持多个动画的：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| animation: floating-enter 1s ease-in-out 1, floating 3s ease-in-out infinite 2s;
@keyframes floating-enter {
0% {
transform: translateY(40%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
@keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
|
通过延时动画，在入场之后轻微地有起伏，接下来就是怎么凸显画幅了，最开始想到的当然是加个光晕：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| background-color: rgb(128, 92, 49);
animation: blink 2s ease-in-out infinite;
@keyframes blink {
0% {
box-shadow: 0 0 13px 13px rgb(128, 92, 49);
}
50% {
box-shadow: 0 0 24px 24px rgb(128, 92, 49);
}
100% {
box-shadow: 0 0 13px 13px rgb(128, 92, 49);
}
}
|
但是发现光晕是以长方形扩散的，于是乎想到增加 border-radius来实现椭圆形的光晕：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| background-color: rgb(128, 92, 49);
animation: blink 2s ease-in-out infinite;
@keyframes blink {
0% {
box-shadow: 0 0 13px 13px rgb(128, 92, 49);
border-radius: 50%;
}
50% {
box-shadow: 0 0 24px 24px rgb(128, 92, 49);
border-radius: 30px;
}
100% {
box-shadow: 0 0 13px 13px rgb(128, 92, 49);
border-radius: 50%;
}
}
|
大功告成，这时候只要把想要凸显的画幅的 box-shadow的偏移量设置得大一些，就有有了点强调的感觉。但还不够。
那就再来个扫光：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| &::after {
content: '';
position: absolute;
top: 100%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
-30deg,
rgba(255, 255, 255, 0) 45%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 65%
);
animation: sweep 3s ease-in-out infinite 2s;
@keyframes sweep {
0% {
transform: translate(0, -30%);
}
100% {
transform: translate(0%, -110%);
}
}
}
|
但是扫光的范围还是个长方形，这也难不住我们，用同样的思路花个椭圆形状就 ok 了：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <div
className={stylex(css`
overflow: hidden;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 85%;
border-radius: 40px;
pointer-events: none;
`)}>
<div
className={css`
position: absolute;
top: 100%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
-30deg,
rgba(255, 255, 255, 0) 45%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 65%
);
z-index: 2;
animation: sweep 3s ease-in-out infinite 2s;
@keyframes sweep {
0% {
transform: translate(0, -30%);
}
100% {
transform: translate(0%, -110%);
}
}
`} />
</div>
|
先用外层整个比画幅稍小一些的椭圆形，然后用 overflow: hidden;限制扫光外溢。这次真的大功告成，让我们一起欣赏下最终效果吧：
