wip: a wave/ripple effect

2022-12-27 14:19:05 -07:00
parent 7583883d64
commit e2ce420764
3 changed files with 193 additions and 0 deletions
--- a/src/resources/css/animations/ripple.css
+++ b/src/resources/css/animations/ripple.css
@@ -0,0 +1,30 @@
+:root {
+    --ripple-color: #fff;
+    --ripple-radius: 9999px;
+    --ripple-duration: 600ms;
+    --ripple-timing-function: linear;
+}
+
+.ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.ripple span {
+    position: absolute;
+    border-radius: var(--ripple-radius);
+    opacity: 0.5;
+    background: var(--ripple-color);
+    transform: scale(0);
+    animation: ripple var(--ripple-duration) var(--ripple-timing-function);
+}
+
+@keyframes ripple {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}