gradient moving

4 years ago · 15a46eb575
parent e102ec04ed
commit 15a46eb575
1 changed files with 26 additions and 0 deletions
--- a/12/resources_06.html
+++ b/12/resources_06.html
@ -3,6 +3,14 @@
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="muisje.js"></script> 
+     <script>
+
+        $('body').ripples({
+    resolution: 512,
+    dropRadius: 20,
+    perturbance: 0.04,
+});</script>
+
    <style> 


@ -31,6 +39,24 @@
      }
      

+    body {
+    background: linear-gradient(to right, darkblue, black, black, black ,#6dc82a, black, black , darkblue);
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
        </style> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">