Update roll.html

microintel · Nov 4, 2024 · f9ca418 · f9ca418
1 parent 4a8bb39
commit f9ca418
Showing 1 changed file with 72 additions and 10 deletions.
diff --git a/file/roll.html b/file/roll.html
@@ -1,5 +1,6 @@
 <html>
 <head>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>roll</title>
 <style type="text/css">
@@ -42,24 +43,80 @@
     justify-content: center;
     align-items: center;
     animation: fly 0.6s ease-out;
+    border-radius:500px;
+
 
 }
 
 img {
 background-image:url('1uUh.gif');
 background-repeat:no-repeat;
 background-size:cover;
-    max-width: 90%;
-    max-height: 90%;
-
-    border-radius: 10px;
+    width: 90%;
+    height: 40%;
+
     box-shadow: 0 20px 20px rgba(0, 0, 0, 0.8);
-    border: 2px solid rgba(255, 255, 255, 0.1);
-    transition: transform 0.3s, box-shadow 0.3s;
+
+
+    border-radius:500px;
+
 }
 
+
+
+	@keyframes rot {
+	0% {
+	border: 0px solid transparent;
+	border-top: 8px solid #f39c12;
+	transform: rotate(0deg);
+	}
+	10% {
+	border: 0px solid transparent;
+	border-right: 8px solid #e74c3c;
+	}
+	20% {
+	border: 0px solid transparent;
+	border-bottom: 8px solid #9b59b6;
+	}
+	30% {
+	border: 0px solid transparent;
+	border-left: 8px solid #3498db;
+	}
+	40% {
+	border: 0px solid transparent;
+	border-top: 8px solid #1abc9c;
+	}
+	50% {
+	border: 0px solid transparent;
+	border-right: 8px solid #f39c12;
+	}
+	60% {
+	border: 0px solid transparent;
+	border-bottom: 8px solid #e74c3c;
+	}
+	70% {
+	border: 0px solid transparent;
+	border-left: 8px solid #9b59b6;
+	}
+	80% {
+	border: 0px solid transparent;
+	border-top: 8px solid #3498db;
+	}
+	90% {
+	border: 0px solid transparent;
+	border-bottom: 8px solid #1abc9c;
+	}
+	100% {
+	border: 0px solid transparent;
+	border-right: 8px solid #f39c12;
+	transform: rotate(360deg);
+	}
+	}
+
+
+
 img:hover {
-    transform: scale(1.2);
+    transform: scale(1.5);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
 }
 
@@ -108,11 +165,13 @@
 
 display:none;
 }
+
+
 </style>
 </head>
 
 <body>
-<h4>Roll</h4>
+<h4 class="bi bi-music-note-beamed"></h4>
 <div id="audaudparr" class="audpar">
 
 </div>
@@ -127,12 +186,15 @@ <h4>Roll</h4>
   let imgX = await xim.json();
 
   for (let x = 0; x < xx.length; x++) {
-    
+
     let ranI = Math.floor(Math.random() * parseInt(xx.length));
     let iU = imgX[ranI]["download_url"];
     let ausrc=xx[ranI]["download_url"];
+
     let stu = `
-      <img src="${iU}" alt="loading" loading="lazy">
+    
+      <img style="animation:60s rot infinite ease;" src="${iU}" alt="loading" loading="lazy">
+      
       <audio src="${ausrc}"></audio>
     `;
     let d = document.createElement("div");