倒影动效
coderljw 2024-10-13 大约 2 分钟
<main>
<section>Magic</section>
</main>
1
2
3
2
3
main {
width: 100%;
height: 400px;
display: grid;
place-items: center;
background: #000;
--color: #ffb8c4ff;
}
section {
position: relative;
display: grid;
place-items: center;
width: 160px;
height: 80px;
font-size: 24px;
border-radius: 10px;
color: var(--color);
overflow: hidden;
cursor: pointer;
transition: 0.3s;
-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4));
}
section:nth-child(2) {
filter: hue-rotate(180);
}
section:hover {
color: #fff;
box-shadow: 0 0 5px var(--color), 0 0 25px var(--color);
}
section::before {
content: ' ';
position: absolute;
z-index: -2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 150%;
height: 300%;
background: linear-gradient(var(--color), var(--color)) 0 0 / 50% 50% no-repeat;
animation: rotate 2s linear infinite;
}
section::after {
content: ' ';
position: absolute;
z-index: -1;
left: 2px;
top: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
background: #000;
border-radius: 10px;
}
section:hover::after,
section:hover::before {
transition: 0.3s;
background: var(--color);
}
@keyframes rotate {
100% {
transform: translate(-50%, -50%) rotate(1turn);
}
}
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<main>
<section class="stage">
<section class="control">
<section class="img-wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</section>
</section>
</main>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
main {
width: 100%;
height: 400px;
background: #000;
}
.stage {
width: 100%;
height: 180px;
perspective: 1200px;
transform-style: preserve-3d;
-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
.control {
position: relative;
width: 100%;
height: 180px;
transform-style: preserve-3d;
transform: translateZ(-1200px) rotateY(50deg) rotateZ(0deg);
animation: rotate 30s linear infinite;
}
.img-wrap {
position: absolute;
width: 240px;
height: 230px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
}
.img-wrap div {
position: absolute;
width: 320px;
height: 260px;
background: url(../../images/Wives/BingBing-1.webp) center/cover no-repeat;
}
.img-wrap div:nth-child(1) {
transform: rotateY(80deg) translateZ(400px);
}
.img-wrap div:nth-child(2) {
background-image: url(../../images/Wives/BingBing-2.webp);
transform: rotateY(125deg) translateZ(400px);
}
.img-wrap div:nth-child(3) {
background-image: url(../../images/Wives/BingBing-3.webp);
transform: rotateY(170deg) translateZ(400px);
}
.img-wrap div:nth-child(4) {
background-image: url(../../images/Wives/BingBing-4.webp);
transform: rotateY(215deg) translateZ(400px);
}
.img-wrap div:nth-child(5) {
background-image: url(../../images/Wives/BingBing-5.webp);
transform: rotateY(260deg) translateZ(400px);
}
.img-wrap div:nth-child(6) {
background-image: url(../../images/Wives/BingBing-6.webp);
transform: rotateY(305deg) translateZ(400px);
}
.img-wrap div:nth-child(7) {
background-image: url(../../images/Wives/BingBing-7.webp);
transform: rotateY(350deg) translateZ(400px);
}
.img-wrap div:nth-child(8) {
background-image: url(../../images/Wives/BingBing-8.webp);
transform: rotateY(395deg) translateZ(400px);
}
@keyframes rotate {
0% {
transform: translateZ(-1200px) rotateY(0deg);
}
50% {
transform: translateZ(-1200px) rotateY(-360deg);
}
100% {
transform: translateZ(-1200px) rotateY(-720deg);
}
}
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
