[bc20307] | 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 | }))``;
|
---|