1import styled, {css, keyframes} from 'styled-components' 2import purpleCube from '../../images/purple-cube.svg' 3import orangeCube from '../../images/orange-cube.svg' 4import redCube from '../../images/red-cube.svg' 5import purpleGradientCube from '../../images/purple-gradient-cube.svg' 6import pinkGradientCube from '../../images/pink-gradient-cube.svg' 7 8const commonCubeStyles = css` 9 background-position: center; 10 background-repeat: no-repeat; 11 position: absolute; 12` 13 14const wiggle = keyframes` 15 0% { 16 transform: rotate(0deg); 17 } 18 33% { 19 transform: rotate(8deg); 20 } 21 100% { 22 transform: rotate(0deg); 23 } 24` 25 26export const CubeTopLeft = styled.div` 27 ${commonCubeStyles}; 28 background-image: url(${purpleCube}); 29 height: 35px; 30 width: 35px; 31 top: 10%; 32 left: 8%; 33 34 animation-name: ${wiggle}; 35 animation-duration: 2.5s; 36 animation-delay: .5s; 37 animation-iteration-count: infinite; 38 animation-fill-mode: both; 39 animation-timing-function: ease-in-out; 40` 41 42export const CubeMiddleLeft = styled.span` 43 ${commonCubeStyles}; 44 background-image: url(${orangeCube}); 45 height: 30px; 46 width: 30px; 47 top: 40%; 48 left: 17%; 49 50 animation-name: ${wiggle}; 51 animation-duration: 2.5s; 52 animation-iteration-count: infinite; 53 animation-fill-mode: both; 54 animation-timing-function: ease-in-out; 55` 56 57export const CubeBottomLeft = styled.span` 58 ${commonCubeStyles}; 59 background-image: url(${redCube}); 60 height: 45px; 61 width: 45px; 62 top: 78%; 63 left: 12%; 64 65 animation-name: ${wiggle}; 66 animation-duration: 3s; 67 animation-iteration-count: infinite; 68 animation-fill-mode: both; 69 animation-timing-function: ease-in-out; 70` 71 72export const CubeBottomRight = styled.span` 73 ${commonCubeStyles}; 74 background-image: url(${pinkGradientCube}); 75 height: 40px; 76 width: 40px; 77 top: 70%; 78 right: 12%; 79 80 animation-name: ${wiggle}; 81 animation-duration: 2.5s; 82 animation-iteration-count: infinite; 83 animation-delay: .3s; 84 animation-fill-mode: both; 85 animation-timing-function: ease-in-out; 86` 87 88export const CubeTopRight = styled.span` 89 ${commonCubeStyles}; 90 background-image: url(${purpleGradientCube}); 91 height: 40px; 92 width: 40px; 93 top: 14%; 94 right: 12%; 95 96 animation-name: ${wiggle}; 97 animation-duration: 3s; 98 animation-iteration-count: infinite; 99 animation-fill-mode: backwards; 100 animation-timing-function: ease-in-out; 101` 102
