#e8e8e8
1#b0 { 2 animation: b0 4s infinite ease; 3 transform-origin: 250px 250px; 4} 5 6#b1 { 7 animation: b1 4s infinite ease; 8} 9 10#b2 { 11 animation: b2 4s infinite ease; 12} 13 14#b3 { 15 animation: b3 4s infinite ease; 16} 17 18#b4 { 19 animation: b4 4s infinite ease; 20} 21 22@keyframes b0 { 23 0% { 24 transform: rotate(0); 25 } 26 27 25% { 28 transform: rotate(-90deg); 29 } 30 31 50% { 32 transform: rotate(-180deg); 33 } 34 35 75% { 36 transform: rotate(-270deg); 37 } 38 39 100% { 40 transform: rotate(-360deg); 41 } 42} 43 44@keyframes b1 { 45 0% { 46 transform: translate(0, 0); 47 } 48 49 25% { 50 transform: translate(0, 355px); 51 } 52 53 50% { 54 transform: translate(355px, 355px); 55 } 56 57 75% { 58 transform: translate(355px, 0); 59 } 60 61 100% { 62 transform: translate(0, 0); 63 } 64} 65 66@keyframes b2 { 67 0% { 68 transform: translate(0, 0); 69 } 70 71 25% { 72 transform: translate(-355px, 0); 73 } 74 75 50% { 76 transform: translate(-355px, 355px); 77 } 78 79 75% { 80 transform: translate(0, 355px); 81 } 82 83 100% { 84 transform: translate(0, 0); 85 } 86} 87 88@keyframes b3 { 89 0% { 90 transform: translate(0, 0); 91 } 92 93 25% { 94 transform: translate(0, -355px); 95 } 96 97 50% { 98 transform: translate(-355px, -355px); 99 } 100 101 75% { 102 transform: translate(-355px, 0); 103 } 104 105 100% { 106 transform: translate(0, 0); 107 } 108} 109 110@keyframes b4 { 111 0% { 112 transform: translate(0, 0); 113 } 114 115 25% { 116 transform: translate(355px, 0); 117 } 118 119 50% { 120 transform: translate(355px, -355px); 121 } 122 123 75% { 124 transform: translate(0, -355px); 125 } 126 127 100% { 128 transform: translate(0, 0); 129 } 130}
614 views
614 views
Comments
MIT License