added player audio animation

1 files changed, 80 insertions, 0 deletions

diff --git a/apps/Player/styles/_player.scss b/apps/Player/styles/_player.scss
index 7c74775..39c79e8 100644
--- a/apps/Player/styles/_player.scss
+++ b/apps/Player/styles/_player.scss
@@ -3,6 +3,27 @@
   position: relative;
   background-color: #000;
 
+  @keyframes phono {
+    0% {
+      transform: translate(25%, -65%) rotate(-15deg);
+    }
+    .5% {
+      transform: translate(25%, -65%) rotate(0deg);
+    }
+    100% {
+      transform: translate(25%, -65%) rotate(18deg);
+    }
+  }
+
+  @keyframes playing {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    to {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+
   & > div:nth-of-type(1) {
     height: 100%;
     width: 100%;
@@ -13,6 +34,65 @@
       width: 100%;
       object-fit: contain;
     }
+
+    > span {
+      position: absolute;
+      top: 45%;
+      left: 50%;
+      height: 9em;
+      width: 9em;
+      border-radius: 50%;
+      animation: playing 15s linear infinite;
+      background-size: cover;
+      background-position: center;
+      border: 3px solid #555;
+
+      &:before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        content: '';
+        height: 2em;
+        width: 2em;
+        border-radius: 50%;
+        background-color: #eee;
+        border: 2px solid #333;
+      }
+
+      &:after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        content: '';
+        height: .25em;
+        width: .25em;
+        border-radius: 50%;
+        background-color: #000;
+      }
+    }
+
+    & > div:nth-child(2) {
+      position: absolute;
+      top: 45%;
+      left: 50%;
+      background-color: #333;
+      border: 2px solid #222;
+      height: 10em;
+      width: 13em;
+      transform: translate(-44%, -62%);
+      border-radius: .5em;
+    }
+
+    & > div:nth-child(4) {
+      transform-origin: 70% 22%;
+      position: absolute!important;
+      top: 45%;
+      left: 50%;
+      transform: translate(25%, -65%);
+      animation: phono 360s forwards;
+    }
   }