Pulsing Button centered

Closer2U · Feb 19, 2024 · 70aad31 · 70aad31
1 parent d4ebb12
commit 70aad31
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/css/pulse.css b/css/pulse.css
@@ -1,22 +1,27 @@
 body, html {
-    height: 100%;
+    height: 99%;
     background: #fcf9f9;
     display: flex;
     justify-content: center;
+    overflow: none;
   }
 
   .container {
     display:flex;
     justify-content: center;
-    max-width:100vw ; 
-    height: 100vh;
+    align-items: center;
+    max-width:99vw ; 
+    height: 99vh;
     /* margin: 0 auto 0; */
     -webkit-perspective: 1000;
     -webkit-backface-visibility: hidden;
     background: #fcf9f9;
   }
 
   .pulse-button {
+    display: flex;
+    position:relative;
+    align-items: center;
     width: calc(98vh/2);/*TODO muss via js berechnen*/ 
     height: calc(98vh/2);
     font-size: 1.3em;
@@ -32,7 +37,7 @@ body, html {
     background: #5a99d4;
     cursor: pointer;
     box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
-    -webkit-animation: pulse 12s infinite;
+    -webkit-animation: pulse 9s infinite;
   }
 
 
@@ -43,12 +48,24 @@ body, html {
       -webkit-transform: scale(0.9);
       transform: scale(0.9);
     }
+    46% {
+      -moz-transform: scale(1);
+      -ms-transform: scale(1);
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
     50% {
       -moz-transform: scale(1);
       -ms-transform: scale(1);
       -webkit-transform: scale(1);
       transform: scale(1);
     }
+    96% {
+      -moz-transform: scale(0.9);
+      -ms-transform: scale(0.9);
+      -webkit-transform: scale(0.9);
+      transform: scale(0.9);
+    }
     100% {
       -moz-transform: scale(0.9);
       -ms-transform: scale(0.9);

diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
 
 
   <div class='container'>
-    <span class='pulse-button'>pulse</span>
+    <span class='pulse-button'>Start</span>
   </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ @@
       <div class='container'>
-        <span class='pulse-button'>pulse</span>
+        <span class='pulse-button'>Start</span>
       </div>
@@ Expand Down @@