1 | import styled, { keyframes } from 'styled-components';
|
---|
2 | import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
|
---|
3 |
|
---|
4 | const flash = keyframes`
|
---|
5 | 0% {
|
---|
6 | opacity: 0;
|
---|
7 | }
|
---|
8 | 25% {
|
---|
9 | opacity: 0.33;
|
---|
10 | }
|
---|
11 | 50% {
|
---|
12 | opacity: 0.66;
|
---|
13 | }
|
---|
14 | 100% {
|
---|
15 | opacity: 1;
|
---|
16 | }
|
---|
17 | `;
|
---|
18 |
|
---|
19 | const speed = `1.8s`;
|
---|
20 | const multipy_by = 30;
|
---|
21 | const add = 0;
|
---|
22 | const delay = 0.15;
|
---|
23 | export const Wrapper = styled.div`
|
---|
24 | display: flex;
|
---|
25 | flex-direction: column;
|
---|
26 | align-items: center;
|
---|
27 | position: relative;
|
---|
28 | width: 100%;
|
---|
29 | height: 100%;
|
---|
30 |
|
---|
31 | .arrow-0 {
|
---|
32 | animation: ${flash} ${speed} infinite ${9 * delay}s;
|
---|
33 | }
|
---|
34 | .arrow-1 {
|
---|
35 | top: ${1 * multipy_by + add}px;
|
---|
36 | animation: ${flash} ${speed} infinite ${8 * delay}s;
|
---|
37 | }
|
---|
38 | .arrow-2 {
|
---|
39 | top: ${2 * multipy_by + add}px;
|
---|
40 | animation: ${flash} ${speed} infinite ${7 * delay}s;
|
---|
41 | }
|
---|
42 | .arrow-3 {
|
---|
43 | top: ${3 * multipy_by + add}px;
|
---|
44 | animation: ${flash} ${speed} infinite ${6 * delay}s;
|
---|
45 | }
|
---|
46 | .arrow-4 {
|
---|
47 | top: ${4 * multipy_by + add}px;
|
---|
48 | animation: ${flash} ${speed} infinite ${5 * delay}s;
|
---|
49 | }
|
---|
50 | .arrow-5 {
|
---|
51 | top: ${5 * multipy_by + add}px;
|
---|
52 | animation: ${flash} ${speed} infinite ${4 * delay}s;
|
---|
53 | }
|
---|
54 | .arrow-6 {
|
---|
55 | top: ${6 * multipy_by + add}px;
|
---|
56 | animation: ${flash} ${speed} infinite ${3 * delay}s;
|
---|
57 | }
|
---|
58 | .arrow-7 {
|
---|
59 | top: ${7 * multipy_by + add}px;
|
---|
60 | animation: ${flash} ${speed} infinite ${2 * delay}s;
|
---|
61 | }
|
---|
62 | .arrow-8 {
|
---|
63 | top: ${8 * multipy_by + add}px;
|
---|
64 | animation: ${flash} ${speed} infinite ${1 * delay}s;
|
---|
65 | }
|
---|
66 | .arrow-9 {
|
---|
67 | top: ${9 * multipy_by + add}px;
|
---|
68 | animation: ${flash} ${speed} infinite;
|
---|
69 | }
|
---|
70 | `;
|
---|
71 |
|
---|
72 | export const Arrow = styled(ArrowBackIosNewIcon).attrs((props) => ({
|
---|
73 | sx: {
|
---|
74 | fontSize: 80,
|
---|
75 | color: props.theme.palette.primary.dark,
|
---|
76 | transform: 'rotate(90deg)',
|
---|
77 | position: 'absolute',
|
---|
78 | // opacity: 0,
|
---|
79 | },
|
---|
80 | }))``;
|
---|